setAttribute, onClick e croce di compatibilità del browser

Ho letto una serie di post su questo, ma nessuno con qualsiasi concreta risposta. Ecco il mio codice:

//button creation
onew = document.createElement('input');
onew.setAttribute("type", "button");
onew.setAttribute("value", "hosts");
onew.onclick = function(){fnDisplay_Computers("'" + alines[i] + "'"); }; //ie
onew.setAttribute("onclick", "fnDisplay_Computers('" + alines[i] + "')"); //mozilla
odiv.appendChild(onew);

Ora, il metodo di setAttribute () (con mozilla commento) funziona bene con mozilla, ma solo se si presenta DOPO la riga sopra di esso. In altre parole sembra proprio di default a seconda di quale viene impostata per ultima. L’ .metodo onclick (con ie commento) non funziona in entrambi i casi, sto utilizzando in modo corretto?

In ogni modo io non riesco a trovare un modo per fare questo lavoro a tutti in IE, figuriamoci in entrambi. Ho fatto cambiare la funzione di chiamata quando si utilizza il .metodo onclick e ha funzionato bene con una semplice chiamata a una funzione di allarme che è il motivo per cui credo che la mia sintassi non è corretta.

Lunga storia breve, non riesco a onclick parametro di lavorare in modo coerente tra IE/Mozilla.

— Nicholas

OriginaleL’autore Nicholas Kreidberg | 2009-04-14

4 risposte

  1. 6

    Io di solito uso qualcosa di simile:

    onew.onclick = new Function("fnDisplay_Computers('" + alines[i] + "')");

    questo dovrebbe funzionare sia in IE e Firefox.

    Questo funziona perfettamente, si può spiegare perché l’impostazione di una nuova funzione” (anche se la funzione fnDisplay_Computers()” è già definita, risolve il problema?
    Penso sia un problema del tipo di dati coinvolti e il riferimento alla “nuova Funzione” associato con il nuovo metodo onclick…ma io davvero non so la risposta esatta, mi dispiace!
    Bellissima!!! Grazie! Avuto problemi con IE7 questo risolto perfettamente.

    OriginaleL’autore Enrico Murru

  2. 15

    onew.setAttribute(“tipo”, “pulsante”);

    Non utilizzare mai setAttribute nei documenti HTML. IE prende per il verso sbagliato, in molti casi, e il DOM HTML proprietà sono più brevi, più veloce e più facile da leggere:

    onew.type= 'button';

    onew.onclick = function(){fnDisplay_Computers(“‘” + alines[i] + “‘”); }; //ie

    Ciò che è ‘alines’? Perché la conversione di una stringa e dintorni con virgolette? Sembra che si sta cercando di fare qualcosa di atroce che coinvolgono la valutazione del codice in una stringa (che è quello che stai facendo seguito nel ‘onew.setAttribute’ versione). La valutazione di codice JavaScript all’interno delle stringhe è quasi sempre la Cosa Sbagliata; evitare come la peste. Nel caso di cui sopra, vale a dire deve fare lo stesso Firefox: non dovrebbe funzionare.

    Se ‘alines[i]’ è una stringa, credo che quello che stai cercando di fare è rendere ricordare che la stringa attraverso la costruzione di una stringa di codice che valuterà in JavaScript per la stringa originale. Ma:

    "'" + alines[i] + "'"

    è insufficiente. Cosa succede se ‘alines[i]’ è un apostrofo o un backslash?

    'O'Reilly'

    hai un errore di sintassi e possibile buco di sicurezza. Ora, si potrebbe fare qualcosa di faticoso e fastidioso come:

    "'" + alines[i].split('\\').join('\\\\').split("'").join("\\'") + "'"

    per cercare di sfuggire alla stringa, ma è brutto e non funziona per altri tipi di dati. Si potrebbe anche chiedere JavaScript per farlo per voi:

    uneval(alines[i])

    Ma non tutti gli oggetti possono anche essere convertiti in evaluatable sorgente JavaScript stringhe; in pratica l’intero approccio è destinato al fallimento.

    La cosa giusta da fare, se vuoi solo il onclick richiamata una funzione con un parametro di scrivere il codice in modo semplice:

    onew.onclick= function() {
        fnDisplay_Computers(alines[i]);
    };

    Generalmente questo sarà il lavoro ed è ciò che si desidera. C’è, tuttavia, un lieve ruga che si può avere colpito qui, che potrebbe essere quello che è fonte di confusione in considerazione il wacky approccio con le corde.

    Cioè, se ” io “in questo caso è la variabile di un allegando ciclo ‘for’, il riferimento al” alines[i] ” non fare quello che tu pensi. L ‘ “io”, accessibile dalla funzione di callback quando il click avviene — che è dopo il ciclo è finito. A questo punto la ‘i’ variabile verrà lasciato con qualsiasi valore che aveva alla fine del ciclo, cosi ‘alines[i]’ sarà sempre l’ultimo elemento di ‘alines’, a prescindere dal ‘onew’ stato fatto clic.

    (Si veda ad esempio. Come risolvere chiusura sul problema in ActionScript 3 (AS3) per qualche discussione di questo. È una delle principali cause di confusione con chiusure in entrambi i JavaScript e Python, e in realtà dovrebbe essere fissato a un livello di lingua qualche giorno.)

    Si può aggirare il problema del ciclo incapsulando la chiusura in funzione sua propria, come questo:

    function callbackWithArgs(f, args) {
        return function() { f.apply(window, args); }
    }
    
    //...
    
    onew.onclick= callbackWithArgs(fnDisplay_Computers, [alines[i]]);

    E in una successiva versione di JavaScript, sarete in grado di dire semplicemente:

    onew.onclick= fnDisplay_Computers.bind(window, alines[i]);

    Se si desidera essere in grado di utilizzare la Funzione”.bind()’ nel browser, è possibile ottenere un’implementazione da Prototipo quadro, o semplicemente utilizzare:

    if (!('bind' in Function.prototype)) {
        Function.prototype.bind= function(owner) {
            var that= this;
            var args= Array.prototype.slice.call(arguments, 1);
            return function() {
                return that.apply(owner,
                    args.length===0? arguments : arguments.length===0? args :
                    args.concat(Array.prototype.slice.call(arguments, 0))
                );
            };
        };
    }
    OTTIMA risposta, wow hai coprire tutte le basi. Fortunatamente le corde sono tutte sterilizzate prima di alines[x], sempre, anche con riferimenti e valori in ingresso sono parte di un array definito comunque, quindi non c’è bisogno di preoccuparsi.
    È sicuro di dire quanto segue: onclick è un gestore di evento e NON un attributo e quindi l’impostazione come un attributo non creare i necessari gestore di eventi per farlo funzionare almeno in IE?
    Sì. In realtà sia un nativo di script per il gestore di evento di proprietà (di tipo Function) e di un documento a livello di attributo (di tipo String), ma perché IE<8 non riesco a capire come attributi di lavoro si tenta di impostare il gestore di eventi per la Stringa invece di una Funzione compilato da esso, che non funziona.
    Ottimo, ho capito. La ringrazio molto per il vostro ingresso bobince.

    OriginaleL’autore bobince

  3. 1

    Utilizzare il addEventListener() funzione con “click” per il type argomento per i browser basati su Mozilla, e attachEvent() funzione con “onclick” come sEvent argomento per IE; credo sia meglio utilizzare un’istruzione try/catch, per esempio:

    try {
      onew.attachEvent("onclick", //For IE
                       function(){fnDisplay_Computers("'" + alines[i] + "'"); });
    }
    catch(e) {
      onew.addEventListener("click", //For Mozilla-based browsers
                       function(){fnDisplay_Computers("'" + alines[i] + "'"); },
                       false);
    }

    OriginaleL’autore Alex Rozanski

  4. 0

    Penso #3 protesteth troppo. In un sacco di situazioni sto costruendo una tabella dinamicamente e necessario per il passaggio dei parametri per la funzione di callback. Non è un typesafe problema dato che la mia variabile parm è un intero indice di riga della tabella in questione. Ecco il codice con una fissa e variabile parametro che sembra essere cross-browser compatibili:

    for (i = 0; i < arrTableData.length; i++) {
        eleTR = objTable.insertRow(i + 1);
        cell = eleTR.insertCell(0);
        cell.width = "21";
        var myElement = document.createElement('img');
        myElement.setAttribute('src', 'images/button_down.gif');
        myElement.setAttribute('alt', 'Move item down');
        myElement.onclick = new Function('moveItem(' + i + ',0)');
        cell.appendChild(myElement);
    }

    OriginaleL’autore marty nickel

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *