Quali sono i motivi tipici per cui Javascript sviluppato su Firefox non riesce su IE? [chiuso]


108

Ho sviluppato alcune pagine ottimizzate per javascript che funzionano bene sui recenti Firefox e Safari. Mi sono perso il controllo in Internet Explorer e ora trovo che le pagine non funzionano su IE 6 e 7 (finora). Gli script in qualche modo non vengono eseguiti, le pagine mostrano come se javascript non fosse presente, anche se alcuni javascript vengono eseguiti. Utilizzo le mie librerie con la manipolazione dom, da YUI 2 utilizzo YUI-Loader e XML-Http-Request, e su una pagina utilizzo "psupload", che dipende da JQuery.

Sto installando Microsoft Script Editor da Office XP e ora eseguirò il debug. Adesso scriverò anche test specifici.

Quali sono i tipici punti deboli di IE? In quale direzione posso tenere gli occhi aperti.

Ho trovato questa pagina, che mostra alcune differenze. visitare: Quirksmode

Puoi dalla tua esperienza nominare alcune cose tipiche che dovrei cercare per prime?

In seguito farò anche altre domande per attività specifiche, ma per ora sono interessato alla tua esperienza sul perché IE di solito non funziona con gli script che funzionano bene in Firefox

Modifica: grazie per tutte quelle ottime risposte!

Nel frattempo ho adattato l'intero codice in modo che funzioni anche con Internet Explorer. Ho integrato jQuery e ho creato le mie classi su di esso ora. Questo è stato il mio errore di base, che non ho creato tutte le mie cose su jQuery dall'inizio. Adesso ho.

Anche JSLint mi ha aiutato molto.

E molti dei singoli problemi delle diverse risposte hanno aiutato.


Finora non ci sono problemi con CSS o styling, come sapevo dalla codifica precedente. Solo problemi JS - karlthorwald
user89021

1
Eseguirò prima JSLint ora su tutti i file, ce ne sono alcuni che non ho mai adattato.
user89021

7
"Questo è stato il mio errore di base, che non ho creato tutte le mie cose su jQuery dall'inizio." - Non risolverà magicamente tutti i tuoi problemi cross-browser. Cerca in stackoverflow jQuery e IE, troverai tantissimi problemi. È meglio imparare da soli lo scripting cross-browser, quindi quando jQuery o uno dei suoi miliardi di plugin abbozzati fallisce, sarai in grado di implementare una vera soluzione cross-browser funzionante e sapere che funziona e perché.
Dagg Nabbit

11
+1 Sul commento di no sopra. Stai MOLTO meglio evitare completamente jQuery IFF stai imparando javascript - jQuery è incredibilmente utile se vuoi fare qualcosa di complesso rapidamente e facilmente, ma se stai imparando ti proteggerà dalla complessità della comprensione di come javascript effettivamente funziona - troppe persone sembrano conoscere jQuery ma non hanno la più pallida idea di come scrivere javascript. Non hai commesso un errore a non costruire su jQuery in origine: ora hai una comprensione molto migliore del tuo codice di quanto avresti se lo avessi fatto.
lucideer

Risposte:


121

Non esitate ad aggiornare questo elenco se vedete errori / omissioni ecc.

Nota: IE9 risolve molti dei seguenti problemi, quindi molti di questi si applicano solo a IE8 e versioni precedenti e in una certa misura IE9 in modalità quirks. Ad esempio, IE9 supporta SVG, <canvas>, <audio>e <video>in modo nativo, tuttavia è necessario abilitare la modalità di conformità norme per loro di essere disponibili.


Generale:

  • Problemi con i documenti parzialmente caricati: è una buona idea aggiungere il tuo JavaScript in un window.onloadevento o simile poiché IE non supporta molte operazioni nei documenti parzialmente caricati.

  • Attributi diversi : in CSS, è elm.style.styleFloatin IE rispetto elm.style.cssFloata Firefox. Nei <label>tag forsi accede all'attributo elm.htmlForin IE rispetto elm.fora Firefox. Nota che forè riservato in IE quindi elm['for']è probabilmente un'idea migliore per impedire a IE di sollevare un'eccezione.


Linguaggio JavaScript di base:

  • Caratteri di accesso nelle stringhe : 'string'[0]non è supportato in IE poiché non è nelle specifiche JavaScript originali. Utilizzare 'string'.charAt(0)o 'string'.split('')[0]notare che l'accesso agli elementi negli array è significativamente più veloce rispetto all'utilizzo charAtcon le stringhe in IE (sebbene ci sia un sovraccarico iniziale quando splitviene chiamato per la prima volta).

  • Virgole prima della fine degli oggetti: ad esempio, {'foo': 'bar',}non sono consentite in IE.


Problemi specifici dell'elemento:

  • Ottenere il documentdi un IFrame :

    • Firefox e IE8 +: IFrame.contentDocument (IE ha iniziato a supportarlo dalla versione 8. )
    • IE: IFrame.contentWindow.document
    • (si IFrame.contentWindowriferisce a windowin entrambi i browser.)

  • Canvas: le versioni di IE precedenti a IE9 non supportano l' <canvas>elemento. IE supporta VML, che è una tecnologia simile, tuttavia, explorercanvas può fornire un wrapper sul posto per <canvas>elementi per molte operazioni. Tieni presente che IE8 in modalità di conformità agli standard è molte volte più lento e presenta molti più difetti rispetto a quando è in modalità quirks quando si utilizza VML.

  • SVG: IE9 supporta SVG in modo nativo. IE6-8 può supportare SVG, ma solo con plugin esterni con solo alcuni di quei plugin che supportano la manipolazione JavaScript.

  • <audio>e <video>: sono supportati solo in IE9.

  • Creazione dinamica di pulsanti di document.createElementopzione : IE <8 ha un bug che rende i pulsanti di opzione creati con non selezionabili. Vedi anche Come si crea dinamicamente un pulsante di opzione in Javascript che funziona in tutti i browser? per un modo per aggirare questo problema.

  • JavaScript incorporato nei <a href>tag e onbeforeunloadconflitti in IE: se è presente JavaScript incorporato nella hrefparte di un atag (ad esempio, <a href="javascript: doStuff()">IE mostrerà sempre il messaggio restituito da a onbeforeunloadmeno che il onbeforeunloadgestore non venga rimosso in anticipo. Vedi anche Richiedi conferma alla chiusura di una scheda .

  • <script>differenze di eventi tag: onsuccess e onerrornon sono supportati in IE e vengono sostituiti da uno specifico di IE onreadystatechangeche viene attivato indipendentemente dal fatto che il download sia riuscito o meno. Vedi anche JavaScript Madness per maggiori informazioni.


Dimensione / posizione / scorrimento dell'elemento e posizione del mouse:

  • Ottenere la dimensione / posizione dell'elemento : la larghezza / altezza degli elementi a volte è elm.style.pixelHeight/Widthin IE piuttosto che elm.offsetHeight/Width, ma nessuno dei due è affidabile in IE, specialmente in modalità quirks, ea volte uno dà un risultato migliore dell'altro.

    elm.offsetTope elm.offsetLeftsono spesso riportati in modo errato, portando a trovare posizioni di elementi errate, motivo per cui gli elementi popup ecc.Sono alcuni pixel fuori in molti casi.

    Si noti inoltre che se un elemento (o un genitore dell'elemento) ha un displaydi, noneIE solleverà un'eccezione quando si accede agli attributi di dimensione / posizione piuttosto che tornare 0come fa Firefox.

  • Ottieni le dimensioni dello schermo (Ottenere l'area visualizzabile dello schermo):

    • Firefox: window.innerWidth/innerHeight
    • Modalità standard IE: document.documentElement.clientWidth/clientHeight
    • Modalità stranezze di IE: document.body.clientWidth/clientHeight

  • Posizione di scorrimento del documento / posizione del mouse : questa in realtà non è definita da w3c, quindi non è standard anche in Firefox. Per trovare il scrollLeft/ scrollTopdel document:

    • Firefox e IE in modalità quirks: document.body.scrollLeft/scrollTop
    • IE in modalità standard: document.documentElement.scrollLeft/scrollTop
    • NOTA: anche alcuni altri browser utilizzano pageXOffset/ pageYOffset.

      function getDocScrollPos() {
       var x = document.body.scrollLeft ||
               document.documentElement.scrollLeft ||
               window.pageXOffset || 0,
           y = document.body.scrollTop ||
               document.documentElement.scrollTop ||
               window.pageYOffset || 0;
       return [x, y];
      };

    Per ottenere la posizione del cursore del mouse, evt.clientXe evt.clientYin mousemoveevents darà la posizione relativa al documento senza aggiungere la posizione di scorrimento quindi sarà necessario incorporare la funzione precedente:

    var mousepos = [0, 0];
    document.onmousemove = function(evt) {
     evt = evt || window.event;
     if (typeof evt.pageX != 'undefined') {
      // Firefox support
      mousepos = [evt.pageX, evt.pageY];
     } else {
      // IE support
      var scrollpos = getDocScrollPos();
      mousepos = [evt.clientX+scrollpos[0], evt.clientY+scrollpos[1]];
     };
    };

Selezioni / intervalli:

  • <textarea>e <input>selezioni : selectionStarte selectionEndnon sono implementati in IE, e al suo posto c'è un sistema proprietario di "intervalli", vedi anche Posizione del cursore nella textarea, in caratteri dall'inizio .

  • Ottenere il testo attualmente selezionato nel documento:

    • Firefox: window.getSelection().toString()
    • IE: document.selection.createRange().text


Ottenere elementi per ID:

  • document.getElementByIdpuò anche fare riferimento nameall'attributo nei moduli (a seconda di quale è definito per primo nel documento) quindi è meglio non avere elementi diversi che hanno le stesse namee id. Questo risale ai giorni in cui idnon era uno standard w3c. document.all( una proprietà proprietaria specifica di IE ) è significativamente più veloce di document.getElementById, ma presenta altri problemi in quanto assegna sempre la priorità nameprima id. Io personalmente uso questo codice, ricadendo con controlli aggiuntivi solo per essere sicuro:

    function getById(id) {
     var e;
     if (document.all) {
      e = document.all[id];
      if (e && e.tagName && e.id === id) {
       return e;
      };
     };
     e = document.getElementById(id);
     if (e && e.id === id) {
      return e;
     } else if (!e) {
      return null;
     } else {
      throw 'Element found by "name" instead of "id": ' + id;
     };
    };

Problemi con innerHTML di sola lettura:

  • IE non non supporta l'impostazione del innerHTML col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, etr gli elementi. Ecco una funzione che funziona attorno a quella per gli elementi relativi alla tabella:

    function setHTML(elm, html) {
     // Try innerHTML first
     try {
      elm.innerHTML = html;
     } catch (exc) {
      function getElm(html) {
       // Create a new element and return the first child
       var e = document.createElement('div');
       e.innerHTML = html;
       return e.firstChild;
      };
      function replace(elms) {
       // Remove the old elements from 'elm'
       while (elm.children.length) {
        elm.removeChild(elm.firstChild);
       }
       // Add the new elements from 'elms' to 'elm'
       for (var x=0; x<elms.children.length; x++) {
        elm.appendChild(elms.children[x]);
       };
      };
      // IE 6-8 don't support setting innerHTML for
      // TABLE, TBODY, TFOOT, THEAD, and TR directly
      var tn = elm.tagName.toLowerCase();
      if (tn === 'table') {
       replace(getElm('<table>' + html + '</table>'));
      } else if (['tbody', 'tfoot', 'thead'].indexOf(tn) != -1) {
       replace(getElm('<table><tbody>' + html + '</tbody></table>').firstChild);
      } else if (tn === 'tr') {
       replace(getElm('<table><tbody><tr>' + html + '</tr></tbody></table>').firstChild.firstChild);
      } else {
       throw exc;
      };
     };
    };

    Si noti inoltre che IE richiede l'aggiunta di a <tbody>a <table>prima di aggiungere <tr>s a <tbody>quell'elemento durante la creazione utilizzando document.createElement, ad esempio:

    var table = document.createElement('table');
    var tbody = document.createElement('tbody');
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    table.appendChild(tbody);
    tbody.appendChild(tr);
    tr.appendChild(td);
    // and so on

Differenze di eventi:

  • Ottenere la eventvariabile: gli eventi DOM non vengono passati alle funzioni in IE e sono accessibili come window.event. Un modo comune per ottenere l'evento è utilizzare, ad esempio, il
    elm.onmouseover = function(evt) {evt = evt||window.event}
    valore predefinito window.eventse evtnon è definito.

  • Differenze tra i codici degli eventi chiave : i codici degli eventi chiave variano notevolmente, anche se se guardi Quirksmode o JavaScript Madness , non è proprio specifico per IE, Safari e Opera sono di nuovo diversi.

  • Differenze degli eventi del mouse: l' buttonattributo in IE è un flag di bit che consente più pulsanti del mouse contemporaneamente:

    • Sinistra: 1 ( var isLeft = evt.button & 1)
    • Destra: 2 ( var isRight = evt.button & 2)
    • Centro: 4 ( var isCenter = evt.button & 4)

      Il modello W3C (supportato da Firefox) è meno flessibile del modello IE, con un solo pulsante consentito contemporaneamente con sinistra come 0, destra come 2e centro come 1. Nota che, come menziona Peter-Paul Koch , questo è molto controintuitivo, come0 solito significa "nessun pulsante".

      offsetXe offsetYsono problematici ed è probabilmente meglio evitarli in IE. Un modo più affidabile per ottenere offsetXe offsetYin IE sarebbe ottenere la posizione dell'elemento relativamente posizionato e sottrarlo da clientXe clientY.

      Si noti inoltre che in IE per ottenere un doppio click in un clickevento avresti bisogno di registrare sia una clicked dblclickevento a una funzione. Firefox si attiva clickcosì come dblclickquando si fa doppio clic, quindi è necessario il rilevamento specifico di IE per avere lo stesso comportamento.

  • Le differenze nella gestione degli eventi del modello: Sia il modello proprietario IE e il modello di gestione di supporto Firefox di eventi dal fondo fino, ad esempio, se ci sono eventi in entrambi gli elementi di <div><span></span></div>eventi poi si innescano in span poi l' divpiuttosto che l'ordine che sono vincolato se un tradizionale ad eselm.onclick = function(evt) {} stato utilizzato .

    Gli eventi "Cattura" sono generalmente supportati solo in Firefox, ecc., Che attiveranno divgli spaneventi in un ordine dall'alto verso il basso. IE ha elm.setCapture()e elm.releaseCapture()per reindirizzare gli eventi del mouse dal documento all'elemento ( elmin questo caso) prima di elaborare altri eventi, ma hanno una serie di prestazioni e altri problemi quindi probabilmente dovrebbero essere evitati.

    • Firefox:

      Allega : elm.addEventListener(type, listener, useCapture [true/false])
      Stacca : elm.removeEventListener(type, listener, useCapture)
      ( typeè ad esempio 'mouseover'senza on)

    • IE: solo un singolo evento di un dato tipo su un elemento può essere aggiunto in IE - viene sollevata un'eccezione se viene aggiunto più di un evento dello stesso tipo. Si noti inoltre che si thisriferisce a windowpiuttosto che all'elemento associato nelle funzioni evento (quindi è meno utile):

      Allega : elm.attachEvent(sEvent, fpNotify)
      Stacca : elm.detachEvent(sEvent, fpNotify)
      ( sEventè ad esempio 'onmouseover')

  • Differenze tra attributi dell'evento:

    • Interrompere l'elaborazione degli eventi da parte di altre funzioni di ascolto :

      Firefox: evt.stopPropagation()
      IE: evt.cancelBubble = true

    • Interrompi, ad esempio, gli eventi chiave dall'inserimento di caratteri o dall'arresto delle caselle di controllo dal controllo:

      Firefox: evt.preventDefault()
      IE: evt.returnValue = false
      Nota: Basta tornare falsein keydown, keypress, mousedown, mouseup, clicke reseteviterà anche di default.

    • Ottieni l'elemento che ha attivato l'evento:

      Firefox: evt.target
      IE: evt.srcElement

    • Ottenere l'elemento da cui si è allontanato il cursore del mouse: evt.fromElement in IE è evt.targetin Firefox se in un onmouseoutevento, altrimentievt.relatedTarget

    • Ottenere l'elemento su cui si è spostato il cursore del mouse: evt.toElement in IE è evt.relatedTargetin Firefox se in un onmouseoutevento, altrimentievt.target

    • Nota: evt.currentTarget (l'elemento a cui è stato associato l'evento) non ha equivalenti in IE.


12
Elenco molto, molto, molto carino! Grazie a tutti coloro che hanno contribuito :)
cwap

26

Verifica anche la presenza di virgole come queste o simili nel codice

var o={
'name1':'value1',
'name2':'value2',
} 

l'ultima virgola (che segue il valore2) sarà tollerata da Firefox, ma non da IE


1
La maggior parte dei bravi editori dovrebbe prendere questo
SeanJA

1
+1, l'ho mangiato troppo spesso.
David V.

1
Ti darei +10 se potessi - questo mi succede tutto il tempo.
Josh

Oh, e per aggiungere al commento di @ SeanJA: recentemente sono passato a NetBeans che lo cattura.
Josh

Ho perso così tante ore su questo le prime volte che ho fatto un po 'di lavoro JS. Ora è la prima cosa che controllo! Maledizione schifose espansioni di Textmate lasciando virgole intorno.
Agos

12

Se continui a usare jQuery o YUI mentre il tuo post è taggato, dovresti avere differenze minime tra i browser ... questo è ciò a cui servono i framework, per prendersi cura di queste differenze tra browser per te.

Per un esempio, guarda la pagina di attraversamento DOM in modalità quirksmode , secondo essa IE non supporta la maggior parte delle cose ... mentre è vero, i framework lo fanno, ad esempio IE non supporta elem.childElementCount, ma in jQuery:$(elem).children().size() funziona per ottenere questo valore, in ogni browser. Scoprirai che c'è qualcosa nella libreria per gestire il 99% dei casi non supportati nei browser, almeno con lo script ... con CSS potresti dover passare ai plugin per la libreria, un esempio comune di questo è ottenere angoli arrotondati lavorando in IE ... poiché non ha il supporto CSS per tali file.

Se tuttavia inizi a fare le cose direttamente, ad esempio document.XXX(thing), allora non sei nella libreria, stai facendo javascript direttamente (è tutto javascript, ma ottieni il punto :), e questo potrebbe o meno causare problemi, a seconda di come ubriaco era il team di IE quando implementava quella particolare funzione.

Con IE hai maggiori probabilità di fallire nello stile che esce bene rispetto ai problemi di javascript grezzo, alle animazioni a pochi pixel e al genere di cose, molto di più, ovviamente in IE6.


Adesso capisco meglio. Sì, ho anche fatto queste cose direttamente. karlthorwald
user89021

1
Se stai usando un IDE come Netbeans puoi impostare i browser di destinazione per il tuo javascript e ti aiuterà anche avvisandoti quando fai qualcosa che non sembra essere supportato.
SeanJA

10

getElementbyID corrisponderà anche all'attributo name in IE, ma non in altri browser, e IE selezionerà quello che trova per primo.

esempio:

<script>
 var foo = document.getElementById('bar');
</script>

....
<input name="bar" type="text" />  //IE will get this element
<span id="bar"> Hello, World! </span>  //FF,Safari,Chrome will get this element

3
scusa per essere scortese ma IE è davvero brutto
user89021

12
document.getElementByIdOrNameIGuessWhateverMan (id);
JulianR

5

Ci sono un sacco di cose, ma una trappola in cui cadevo era che molti browser accettano JSON senza nomi tra virgolette, mentre ie6 e ie7 no.

{ name: "Jakob" } // will often work, but not in ie6/ie7
{ "name": "Jakob" } // Better!

Modifica : per chiarire, questo è un problema solo quando è richiesto un JSON effettivo, al contrario di un oggetto letterale. JSON è un sottoinsieme della sintassi letterale dell'oggetto ed è inteso come un formato di scambio di dati (come XML), motivo per cui è progettato per essere più esigente.


2
Nota che questo dipende dal contesto, un oggetto letterale va bene, JSON no ... ma ad esempio jQuery non consente affatto JSON non validi nella loro ultima versione.
Nick Craver

Non è il mio voto negativo ... ma dovresti chiarirlo agli altri, quindi +1 da me.
Nick Craver

5

Supporto JavaScript diverso

IE non supporta (la maggior parte delle) estensioni aggiunte a JavaScript dalla 1.5.

Nuovo in 1.6

  • Metodi Array - indexOf(), lastIndexOf(), every(), filter(), forEach(), map(),some()
  • for each ... in - itera valori invece di nomi di proprietà.

Nuovo in 1.7

Nuovo in 1.8

  • Metodi array - reduce(),reduceRight()
  • Scorciatoie per la definizione delle funzioni.

Alcune di queste cose richiedono di specificare un numero di versione di JavaScript con cui eseguire (che si interromperà in IE), ma alcune cose come [1,2,3].indexOf(2) potrebbero non sembrare un grosso problema, finché non provi a eseguirlo in IE


1
il JavaScript di cui parli qui è JavaScript (TM) di mozilla, non javascript nel senso più generico. Non tutte le implementazioni ECMAScript / motori javascript (MS JScript in questo caso) dovrebbero seguire JavaScript (TM) di mozilla. ECMAScript è lo standard, non JavaScript (TM) e JavaScript (TM) non è javascript. Spero che abbia senso.
Dagg Nabbit

Ha senso per me, ma su un thread sulla compatibilità tra JavaScript e JScript, ho pensato che sarebbe stato già compreso :)
gnarf

Quando dici "IE non supporta (la maggior parte) delle estensioni aggiunte a JavaScript dalla 1.5.", Sembra che tu stia dicendo che JavaScript (TM) di mozilla è uno standard a cui IE dovrebbe aderire, quando ovviamente non lo è. Potresti almeno dire JavaScript di Mozilla o simile ... altri browser non supportano tutte le estensioni di mozilla a ECMAScript come l'assegnazione destrutturante, ecc. La domanda riguardava le differenze tra "la maggior parte" javascripte (l'implementazione specifica) JScript, non le differenze tra Mozilla JavaScript(TM)e JScript. Potrebbe essere meglio mostrare dove IE devia da ES.
Dagg Nabbit

3

Le principali differenze tra JavaScript in IE e JavaScript nei browser moderni (ad es. Firefox) possono essere attribuite alle stesse ragioni alla base delle differenze nel cross-browser CSS / (X) HTML. In passato non c'era uno standard de facto; IE / Netscape / Opera hanno combattuto una guerra per il territorio, implementando la maggior parte delle specifiche, ma anche omettendone alcune e creando specifiche proprietarie per ottenere vantaggi l'una dall'altra. Potrei andare avanti a lungo, ma passiamo al rilascio di IE8: JavaScript è stato evitato / disprezzato per anni, e con l'ascesa di FF e il disprezzo del webcomm, IE ha scelto di concentrarsi principalmente sull'avanzamento del proprio CSS da IE6 in poi. E in pratica ha lasciato il supporto DOM. Il supporto DOM di IE8 potrebbe anche essere IE6, lanciato nel 2001 ... quindi il supporto DOM di IE è indietro di quasi un decennio rispetto ai browser moderni. Se si riscontrano discrepanze JavaScript specifiche di un motore di layout, la soluzione migliore è attaccarlo nello stesso modo in cui abbiamo affrontato i problemi CSS; Targeting di quel browser. NON USARE LO SNIFF DEL BROWSER, usa il rilevamento delle funzionalità per fiutare il tuo browser / il suo livello di supporto DOM.

JScript non è l'implementazione di ECMAScript di IE; JScript era la risposta di IE al JavaScript di Netscape, entrambi nati prima di ECMAScript.

Per quanto riguarda gli attributi di tipo sull'elemento script, type = "text / javascript" è lo standard predefinito (almeno in HTML5), quindi non è mai necessario un attributo di tipo a meno che lo script non sia JavaScript.

Per quanto riguarda IE che non supporta innerHTML ... innerHTML è stato inventato da IE ed è ancora oggi NON uno standard DOM. Altri browser lo hanno adottato perché è utile, motivo per cui puoi utilizzarlo cross-browser. Per quanto riguarda le tabelle che cambiano dinamicamente, MSDN dice "a causa della struttura specifica richiesta dalle tabelle, innerText e innerHTML proprietà della tabella e degli oggetti tr sono di sola lettura". Non so quanto di ciò fosse vero inizialmente, ma chiaramente i browser moderni l'hanno capito mentre si occupavano delle complessità del layout delle tabelle.

Consiglio vivamente di leggere PPK su JavaScript Script DOM di Jeremy Keith JavaScript: The Good Parts di Douglas Crockford e JavaScript iniziale di Christian Hellman con DOM Scripting e Ajax per avere una buona conoscenza di JavaScript.

Per quanto riguarda Framework / Librerie, se non hai ancora una buona conoscenza di JavaScript, dovresti evitarli. 2 anni fa sono caduto nella trappola di jQuery e, sebbene fossi in grado di realizzare imprese magnifiche, non ho mai imparato nulla sulla codifica corretta di JavaScript. Col senno di poi, jQuery è un fantastico toolkit DOM, ma la mia incapacità di apprendere chiusure adeguate, eredità prototipica, ecc., Non solo ha ripristinato le mie conoscenze personali, il mio lavoro ha iniziato a ricevere enormi successi di prestazioni perché non avevo idea di cosa stessi facendo.

JavaScript è la lingua del browser; se sei un ingegnere lato client / front-end, è della massima importanza che comandi JavaScript. Node.js sta portando JavaScript a pieno regime, vedo passi enormi compiuti ogni giorno nel suo sviluppo; JavaScript lato server sarà uno standard nel prossimo futuro. Lo menziono per enfatizzare ulteriormente quanto sia importante JavaScript ora e lo sarà.

JavaScript farà più ondate di Rails.

Buon script!


2
Bella risposta, anche se non sono d'accordo con l'utilizzo del rilevamento delle funzionalità per fiutare il browser; utilizzare il rilevamento delle funzionalità solo per verificare il supporto di tali funzionalità. Vedere anche gli esempi in Il rilevamento delle funzionalità non è il rilevamento del browser .
Marcel Korpel

meh. sono completamente d'accordo con il tuo disaccordo. grazie per averlo capito. sono ancora un JavaScript n00b, ma non c'è da vergognarsi nel mio gioco. "Il rilevamento del browser basato sulle funzionalità è una pessima pratica che dovrebbe essere evitata a tutti i costi. Il rilevamento diretto delle funzionalità è una best practice e, in quasi tutti i casi, è esattamente ciò di cui hai bisogno".
albert

2

Alcuni oggetti nativi sono di sola lettura senza che lo siano davvero (puoi scrivere su di essi ma non ha alcun effetto). Ad esempio, un comune javascript avanzato si basa sull'estensione Elementdell'oggetto sovrascrivendo i metodi di sistema, ad esempio, cambiando Element.prototype.appendChild () per fare di più che aggiungere un nodo figlio, ad esempio inizializzarlo con i dati del genitore. Questo fallirà silenziosamente su IE6 - il metodo originale verrà invocato su nuovi oggetti invece che su quello nuovo.

Alcuni browser (non ricordo quale ora) considerano i newline tra i tag HTML come nodi di testo, mentre altri no. Quindi childNodes (n), nextSibling (), firstChild () e simili si comporteranno in modo molto diverso.


2

Le virgole finali negli array e nei valori letterali degli oggetti erano un problema, non sono state verificate di recente (che significa IE8):

var a = [ 1, 2, 3, ];
var o = { a:1, b:2, c:3, };

Ciò causerebbe del codice aggiuntivo durante la generazione di tali strutture lato server.


2

Ne ho trovato uno stamattina, un collega ha impostato il tag script come: <script type="application/javascript">perché il suo completamento automatico ide lo aveva prima di "text / javascript"

Ma, risulta che IE ignora l'intero script se usi "application / javascript", devi usare "text / javascript"


javascript è predefinito in tutti i browser, quindi usa solo<script>
Lauri

2

Ho trovato uno strano capriccio proprio l'altro giorno con Internet Explorer. Stavo usando YUI e sostituivo il contenuto di una tabella body () impostando innerHTML

Y.one('#elementId').set('innerHTML', '<tr><td>Column 1</td></tr>');

Questo funzionerebbe in tutti i browser TRANNE IE. Alla fine ho scoperto che non puoi sostituire l'InnerHTML di una tabella in IE. Ho dovuto creare un nodo usando YUI e quindi aggiungere quel nodo.

var myNode = Y.node.create('<tr><td>Column 1</td></tr>');
Y.one('#elementId').append(myNode);

È stato divertente capirlo!


1
Ho la sensazione che tu debba avvolgerlo con i <tbody>tag.
Casey Chu

Nel codice originale, è effettivamente racchiuso in un tag <tbody>. Mi stupisce ancora che a IE non sia piaciuto. Ricordo di averlo letto nei documenti ufficiali di Microsoft, ma ora non riesco a trovare il collegamento. Scusa!
Justin

1

Le virgole extra e le virgole mancanti erano un problema comune su IE mentre funziona senza problemi su FF.


1

IE è molto severo sulla mancanza di ";" di solito è così.


Trovo molti di questi mentre sto usando jsLint. Sembra essere un punto importante.
user89021

1

Per quel che vale, mi sono imbattuto in questo brutto problema in <IE9

diciamo che hai un html come questo:

<table><tr><td>some content...</td></tr></table>

e per qualche motivo (ne avevo uno buono) devi recuperare tutto l'HTML nella tabella prima dell'ultima chiusura TR potresti provare qualcosa del genere:

var tableHtml = document.getElementById('thetable').innerHTML;
var fragment = tableHtml.substring(0, tableHtml.lastIndexOf('</tr>'));

<IE9 non restituirà nulla (-1) qui perché la variabile tableHtml contiene tutti i tag html in maiuscolo e lastIndexOf distingue tra maiuscole e minuscole. Per aggirare questo problema ho dovuto inserire un toLowerCase () prima di lastIndexOf.


0

IE non è un browser moderno e segue solo ECMAScript liberamente.


0

Hai menzionato jQuery con cui ho meno familiarità ma per riferimento generale, e in particolare con Prototype, una cosa a cui prestare attenzione sono le parole riservate / i nomi dei metodi in IE. So che quello che spesso mi capita sono cose come:

someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );

(new Element (tagName, propertyHash) è il modo in cui i nuovi elementi vengono creati in Protitype). In IE, for:deve essere 'for':, perché forè una parola riservata. Il che ha perfettamente senso, ma FireFox lo tollererà.

Un altro esempio:

someElement.wrap('div').addClassName('someClass')

(il wrapmetodo in Prototype avvolge un elemento in un altro) - In IE, su textareas, wrapè una proprietà e Element.wrap()deve essere utilizzato al posto della versione metodizzata

Questi sono due esempi che mi vengono in mente dalla mia esperienza. Si basano sul prototipo, ma il problema principale non è: attenzione a metodi / etichette / identificatori che IE considera parole riservate ma che FireFox o Safari tollereranno.


0

Il fatto è che IE non supporta JavaScript ... Supporta la sua implementazione di ECMAScript: JScript ... che è un po 'diverso ...


0

L'utilizzo console.log()per l'output degli errori nella console degli errori di Firefox causerà il fallimento degli script in IE. Ricordati di toglierli quando provi in ​​IE.


Credo che l'uso di console.log fallirà anche in Firefox se non hai FireBug attivato.
ejel
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.