Internet Explorer e le keyword JavaScript in jQuery
Martedì 26 Aprile 2011 - 15:50
di Gabriele Romanato
Internet Explorer (versione 8 e inferiori) ha dei problemi con le parole riservate JavaScript quando queste appaiono nel contesto di un metodo jQuery. IE semplicemente restituisce un errore quando incontra parole chiave come class e simili, specialmente quando queste si trovano all’interno di oggetti letterali usati come opzioni del metodo in questione.
Per esempio, se volessimo impostare contemporaneamente gli attributi ID e class di un elemento, si potrebbe usare il metodo attr():
$(element).attr({
id: 'test',
class: 'test'
});
È qui che IE restituisce un errore: class dovrebbe essere racchiuso tra virgolette, o al limite si dovrebbe usare un altro metodo, come addClass(). Inutile dire che tutti gli atri browser non sollevano eccezioni.
Categoria: Scripting | Permalink
Commenti
1
Era stato simpatico, ricordo un paio di anni fa, scoprirlo da solo… dopo una mezza giornata di maledizioni.
# - postato da daweb - 26 Aprile 2011 - 16:20
2
In realtà credo che abbia ragione IE, e che da specifica, le parole riservate debbano essere racchiuse tra virgolette quando sono usate come chiavi in un oggetto.
Gli altri browser, non restituendo un errore, causano problemi incomprensibili come quelli di daweb.
# - postato da Andrea - 26 Aprile 2011 - 16:49
3
E, per inciso, il problema non ha niente a che vedere con jQuery. L’argomento al metodo attr è un oggetto, che può essere creato in qualsiasi modo. Di solito, come nel caso in esempio, si fa uso di un oggetto letterale.
Il problema è dunque se riconoscere la parola class (non quotata) come chiave di un oggetto letterale oppure no. La specifica dice di no.
In realtà tutta la confusione sarebbe eliminata se non ci fossero due modi diversi di specificare le chiavi di un oggetto (stringa quotata o non quotata), di cui solo uno è valido per certi valori della chiave (parole riservate, identificatori di variabile non validi ecc.).
# - postato da Andrea - 26 Aprile 2011 - 17:04
4
Gli altri browser non riportano nessun effetto collaterale, in quanto interpretano
classnel seguente contesto:attr: function( name, value ) {
return jQuery.access( this, name, value, true, jQuery.attr );
}access: function( elems, key, value, exec, fn, pass ) {
var length = elems.length;// Setting many attributes
if ( typeof key === "object" ) {
for ( var k in key ) {
jQuery.access( elems, k, key[k], exec, fn, value );
}
return elems;
}// Setting one attribute
if ( value !== undefined ) {
// Optionally, function values get executed if exec is true
exec = !pass && exec && jQuery.isFunction(value);for ( var i = 0; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
}return elems;
}// Getting an attribute
return length ? fn( elems[0], key ) : undefined;
}Il problema è nel modo in cui IE interpreta una parola chiave come
classnel contesto sopra indicato, perchè altrimenti non si spiegherebbe come altri 4 browser interpretino differentemente. :-)# - postato da Gabriele Romanato - 26 Aprile 2011 - 17:20
5
Comunque non è una cosa che riguarda solo IE: anche su Safari l’uso della chiave «class» può comportare un errore da parte dell’interprete (provato di persona un paio di mesi fa)
# - postato da Fabrizio Calderan - 26 Aprile 2011 - 17:55
6
Non sono del tutto convinto. La snippet che riporti
$(element).attr({
id: ‘test’,
class: ‘test’
});dovrebbe dare un problema di parsing già al momento della creazione dell’oggetto che viene passato come argomento a $(element).attr().
Poco importa il contesto in cui viene usato questo argomento. Nel momento in cui viene eseguito il codice che riporti, l’oggetto è già stato creato. Faccio un altro esempio
$(element).css({
color: ‘white’,
margin-top: 15
});In questo esempio, l’identificatore non valido è margin-top, che non è un nome di variabile valido. Affinché l’esempio funzioni è necessario quotarlo.
Giustamente, questo esempio fallisce anche su Firefox. E il messaggio di errore (SyntaxError: missing : after property id) mostra che il problema avviene al momento della creazione dell’oggetto, e non della valutazione della proprietà più tardi.
Credo che il motivo per cui class è invece accettato su vari browser sia un compromesso di praticità, ma contrario alla specifica.
In effetti class è una parola riservata, ma per uso futuro, il che significa che usarla adesso non danneggia niente. Evidentemente, siccome è anche una proprietà molto comune da settare, i produttori dei vari browser avranno optato per non trattarla come parola riservata. Internet Explorer ha tante colpe, ma stavolta stava solo rispettando lo standard.
Se proprio vogliamo dare una colpa a qualcuno, è di chi ha disegnato il linguaggio permettendo l’uso di stringhe non quotate come identificatori, ma con una complicata lista di eccezioni.
# - postato da Andrea - 26 Aprile 2011 - 17:59
7
Scusate ma perchè non si mettono d’accordo? Non ne posso più! Decidetevi: fate una bella specifica tipo C++ ANSI/ISO, chiamatela come vi pare, sedetevi di fronte ad un tavolo tutti quanti e mettete fine a sto marasma. ECMAScript c’è, quindi vi prego, basta ore buttate dietro due virgolette! Ho buttato un’intero slider con tutti degli effetti che mi erano costati 120 righe di codice per due virgolette! Vi prego, non ne possiamo più. Spero di non dover scrivere più post così per delle inezie, dei dettagli. :-/
scusate lo sfogo, ma non penso che il cliente accetti la storia delle virgolette come giustificazione del ritardo :-D
# - postato da Gabriele Romanato - 26 Aprile 2011 - 18:02
8
Capisco lo sfogo! :-D
Se vuoi un consiglio, inizia ad utilizzare un sistema di controllo versione come Mercurial o GIT. Una volta imparato ad usare, porta via pochi secondi. Ma nel momento in cui hai buttato via lo slider perché non funziona su IE, e ti accorgi che in realtà era solo un problema di virgolette, avere la vecchia versione a disposizione è una manna dal cielo! ;-)
# - postato da Andrea - 26 Aprile 2011 - 18:14
9
Per fortuna l’ho recuperato… GIT lo conosco, adesso do un’occhio a Mercurial… grazie Andrea :-)
# - postato da Gabriele Romanato - 26 Aprile 2011 - 20:01
10
Io, in questi casi, utilizzo sempre le virgolette, perché mi è sempre sembrano il modo più corretto di scrivere. Adesso che ho scoperto che altrimenti alcune cose non funzionerebbero con Internet Explorer, sono contento di non aver perso ore su questo problema in passato.
11
@Gabriele: le specifiche ci sono e sono chiare: class è una parola riservata futura e non può essere quindi usata come identificatore. In un ObjectLiteral però quello che compare non è un identificatore (Identifier) ma un IdentifierName che è come un Identifier senza limitazioni di parole riservate. I nomi di variabile (variabile, non proprietà!), di funzione o di parametri sono invece Identifier e quindi sono escluse tutte le parole riservate.
Quindi questo è un bug di InternetExplorer.# - postato da Carlo Cannas - 27 Aprile 2011 - 22:10