Jakie są typowe powody, dla których Javascript rozwijany w Firefoksie zawodzi w IE? [zamknięte]

Prosimy o aktualizację tej listy, jeśli zauważysz jakieś błędy / pominięcia itp.

Uwaga: IE9 rozwiązuje wiele z następujących problemów, więc wiele z nich dotyczy tylko IE8 i poniżej oraz w pewnym stopniu IE9 w trybie dziwactwa. Na przykład IE9 obsługuje SVG, <canvas>, <audio> i <video> natywnie, jednak musisz włączyć tryb zgodności ze standardami, aby były dostępne.

Ogólne:

• Problemy z częściowym załadowane dokumenty: dobrze jest dodać swój JavaScript w window.onload lub podobnym zdarzeniu, ponieważ IE nie obsługuje wielu operacji w częściowo załadowanych dokumentach.

• Różne atrybuty: w CSS jest elm.style.styleFloat W IE vs elm.style.cssFloat w Firefoksie. W znacznikach <label> atrybut for jest dostępny za pomocą elm.htmlFor W IE vs elm.for w Firefoksie. Zauważ, że {[12] } jest zarezerwowane W IE, więc {[16] } jest prawdopodobnie lepszym pomysłem, aby powstrzymać IE przed podnoszeniem wyjątek.

Podstawowy język JavaScript:

• Dostęp do znaków w łańcuchach: 'string'[0] nie jest obsługiwany w IE, ponieważ nie jest w oryginalnych specyfikacjach JavaScript. Używaj 'string'.charAt(0) lub 'string'.split('')[0] zauważając, że dostęp do elementów w tablicach jest znacznie szybszy niż używanie charAt z łańcuchami w IE (chociaż istnieje pewien początkowy narzut, gdy split jest wywoływany po raz pierwszy.)

• Przecinki przed końcem obiekty: np. {[22] }nie są dozwolone w IE.

Zagadnienia specyficzne dla elementu:

• Otrzymanie document IFrame :

  • Firefox i IE8+: IFrame.contentDocument (IE zaczął wspierać to od wersji 8.)
  • IE: IFrame.contentWindow.document
  • (IFrame.contentWindow odnosi się do window w obu przeglądarkach.)

• Canvas: Wersje IE przed IE9 nie obsługuje elementu <canvas>. IE obsługuje VML, który jest jednak podobną technologią, a explorercanvas może zapewnić wrapper na miejsce dla elementów <canvas> dla wielu operacji. Należy pamiętać, że IE8 w trybie zgodności ze standardami jest wielokrotnie wolniejszy i ma o wiele więcej błędów niż w trybie dziwactwa podczas korzystania z VML.

• SVG: IE9 obsługuje SVG natywnie. IE6 - 8 może obsługiwać SVG, ale tylko z zewnętrznym wtyczki tylko niektóre z tych wtyczek obsługujących manipulację JavaScript.

• <audio> oraz <video>: są obsługiwane tylko w IE9.

• Dynamiczne tworzenie przycisków radiowych: IE document.createElement są nie do wykrycia. Zobacz także jak dynamicznie utworzyć przycisk radiowy w Javascript, który działa we wszystkich przeglądarkach? dla sposobu na obejście to.

• Wbudowany JavaScript w znacznikach <a href> i konflikty onbeforeunload W IE: jeśli w href część znacznika a jest wbudowany JavaScript (np. <a href="javascript: doStuff()">, wtedy IE zawsze wyświetli wiadomość zwróconą z onbeforeunload, chyba że obsługa onbeforeunload zostanie wcześniej usunięta. Zobacz także poproś o potwierdzenie podczas zamykania karty.

• <script> tag event differences: onsuccess i onerror nie są obsługiwane w IE i są zastępowane przez Specyficzne dla IE onreadystatechange, które jest uruchamiane niezależnie od tego, czy pobieranie się powiodło, czy nie. Zobacz również JavaScript Madness aby uzyskać więcej informacji.

Rozmiar elementu/pozycja / przewijanie i pozycja myszy:

• Getting element size / position: width / height of elements is sometimes elm.style.pixelHeight/Width in IE than elm.offsetHeight/Width, but either is reliable in IE, especially in quirks mode, and sometimes one gives a better result than the other.

  elm.offsetTop i elm.offsetLeft są często błędnie zgłaszane, co prowadzi do znalezienia pozycji elementów, które są nieprawidłowe, dlatego elementy popup itp. są w wielu przypadkach o kilka pikseli wyłączone.

  Należy również zauważyć, że jeśli element (lub rodzic elementu) ma display z none, to IE wywoła wyjątek podczas uzyskiwania dostępu do atrybutów size/position, zamiast zwracać 0, Jak to robi Firefox.

• Get the screen size (Getting the viewable obszar ekranu):

  • Firefox: window.innerWidth/innerHeight
  • IE standards mode: document.documentElement.clientWidth/clientHeight
  • IE quirks mode: document.body.clientWidth/clientHeight

• Pozycja przewijania dokumentu / pozycja myszy: ta nie jest zdefiniowana przez w3c, więc jest niestandardowa nawet w Firefoksie. Aby znaleźć scrollLeft/scrollTop Z document:

  • Firefox i IE w trybie quirks: document.body.scrollLeft/scrollTop
  • IE w trybie standardowym: document.documentElement.scrollLeft/scrollTop

  • Uwaga: niektóre inne przeglądarki używają pageXOffset/pageYOffset też.

    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];
    };
    

  Aby uzyskać pozycję kursora myszy, evt.clientX i evt.clientY w zdarzeniach mousemove podadzą pozycję względem dokumentu bez dodawania pozycji przewijania więc poprzednia funkcja będzie musiała być incorporated:

  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]];
   };
  };
  

Selekcje / zakresy:

• <textarea> i <input> selekcje: selectionStart i selectionEnd nie są zaimplementowane w IE, a w jego miejsce znajduje się zastrzeżony system "zakresów", patrz także pozycja w textarea, w znakach od początku .

• Uzyskanie aktualnie wybranego tekstu w dokumencie:

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

Pobieranie elementów według ID:

• document.getElementById może również odnosić się do atrybutu name w formularzach (w zależności od tego, który jest zdefiniowany jako pierwszy w dokumencie), więc najlepiej nie mieć różnych elementów, które mają te same name i id. Datuje się to na czasy, kiedy id nie był standardem w3c. document.all (zastrzeżona właściwość IE-specific) jest znacznie szybsza niż document.getElementById, ale ma inne problemy, ponieważ zawsze ustala priorytety name przed id. Ja osobiście używam tego kodu, wycofując się z dodatkowymi sprawdzeniami dla pewności:

  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;
   };
  };
  

Problemy z tylko do odczytu innerHTML:

• IE does not support setting the innerHTML of col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, i tr elementów. Oto funkcja, która działa wokół tego dla elementy związane z tabelą:

  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;
    };
   };
  };
  

  Zauważ również, że IE wymaga dodania <tbody> do <table> przed dodaniem <tr>s do tego <tbody> elementu podczas tworzenia za pomocą document.createElement, na przykład:

  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
  

Różnice zdarzeń:

• Uzyskanie zmiennej event: zdarzenia DOM nie są przekazywane do funkcji w IE i są dostępne jako window.event. Jednym z powszechnych sposobów uzyskania zdarzenia jest użycie np.
  elm.onmouseover = function(evt) {evt = evt||window.event}
  które domyślnie window.event if {[100] } jest niezdefiniowane.

• Różnice w kodzie zdarzeń kluczowych: kody zdarzeń kluczowych różnią się bardzo, choć jeśli spojrzeć na Quirksmode lub szaleństwo JavaScript, to trudno jest specyficznie dla IE, Safari i Opera są różne ponownie.

• Różnice w zdarzeniach myszy: atrybut button W IE jest znacznikiem bitowym, który pozwala na użycie wielu przycisków myszy jednocześnie:

  • Left: 1 (var isLeft = evt.button & 1)
  • prawo: 2 (var isRight = evt.button & 2)

  • Centrum: 4 (var isCenter = evt.button & 4)

    W przeciwieństwie do Firefoksa, Firefoksa nie można używać w przeglądarce Firefox, ale można używać tylko jednego przycisku na raz, z lewej strony jako 0, prawej jako 2 i środka jako 1. Zauważ, że, jak wspomina Peter-Paul Koch , jest to bardzo intuicyjne, ponieważ 0 zwykle oznacza "bez przycisku".

    offsetX i offsetY są problematyczne {[168] } i chyba najlepiej ich unikać w IE. Bardziej niezawodnym sposobem uzyskania offsetX i offsetY W IE byłobyuzyskanie pozycji elementu relatywnie położonego i odjęcie go od clientX i clientY.

    Zauważ również, że w IE, aby uzyskać podwójne kliknięcie w zdarzeniu click, musisz zarejestrować zarówno Zdarzenie click, jak i dblclick do funkcji. Firefox odpala click oraz dblclick po dwukrotnym kliknięciu, więc Detekcja specyficzna dla IE jest potrzebna do zachowuj się tak samo.

• Różnice w modelu obsługi zdarzeń: zarówno własny model IE, jak i model Firefoksa obsługują zdarzenia od dołu do góry, np. jeśli w obu elementach <div><span></span></div> występują zdarzenia, zdarzenia zostaną uruchomione w span następnie div zamiast kolejności, którą są związane, jeśli użyto tradycyjnego np. elm.onclick = function(evt) {}.

  Zdarzenia"Capture" są zwykle obsługiwane tylko w Firefox itp., który wywoła div, a następnie span zdarzenia w kolejności od góry do dołu. IE ma elm.setCapture() i elm.releaseCapture() do przekierowania zdarzeń myszy z dokumentu do elementu (elm w tym przypadku) przed przetworzeniem innych zdarzeń, ale mają one wiele problemów z wydajnością i innymi, więc prawdopodobnie należy unikać.

  • Firefox:

    Dołącz: elm.addEventListener(type, listener, useCapture [true/false])
    Detach: elm.removeEventListener(type, listener, useCapture)
    (type jest np. 'mouseover' bez on)

  • IE: tylko pojedyncze zdarzenie danego typu na elemencie może być dodane w IE - wyjątek jest wywoływany, jeśli dodano więcej niż jedno zdarzenie tego samego typu. Należy również zauważyć, że this odnosi się do window, a nie do związanego elementu w funkcjach zdarzeń (więc jest mniej użyteczny):

    Dołącz: elm.attachEvent(sEvent, fpNotify)
    Detach: elm.detachEvent(sEvent, fpNotify)
    (sEvent jest np. 'onmouseover')

• Różnice atrybutów zdarzeń:

  • Zatrzymywanie zdarzeń przed przetwarzaniem przez inne funkcje nasłuchowe :

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

  • Zatrzymywanie np. zdarzeń kluczowych przed wstawianiem znaków lub zatrzymywanie checkboxów przed sprawdzaniem:

    Firefox: evt.preventDefault()
    IE: evt.returnValue = false
    Uwaga: po prostu zwracam false w keydown, keypress, mousedown, mouseup, click i reset będzie również zapobiegać domyślnym.

  • Pobierz element, który wywołał zdarzenie:

    Firefox: evt.target
    IE: evt.srcElement

  • Przesunięcie elementu z którego kursor myszki: evt.fromElement w IE jest evt.target w Firefoksie jeśli w zdarzeniu onmouseout , inaczej evt.relatedTarget

  • Uzyskanie elementu, do którego przesunięto kursor myszy: evt.toElement W IE jest evt.relatedTarget w Firefoksie jeśli w zdarzeniu onmouseout, w przeciwnym evt.target

  • Uwaga: evt.currentTarget (element, z którym związane było zdarzenie) nie ma odpowiednika w IE.