Каковы типичные причины, по которым Javascript, разработанный в Firefox, терпит неудачу в IE? [закрытый]

пожалуйста, не стесняйтесь, чтобы обновить этот список, если вы видите какие-либо ошибки/недочеты и т. д.

Примечание: IE9 исправляет многие из следующих проблем, поэтому многое из этого относится только к IE8 и ниже и в определенной степени IE9 в режиме причуд. Например, IE9 поддерживает SVG,<canvas>, <audio> и <video> изначально, однако вы должны включить режим соответствия стандартам для них, чтобы быть доступный.

общие:

• проблемы с частично загруженными документами: это хорошая идея, чтобы добавить JavaScript в window.onload или аналогичное событие, поскольку IE не поддерживает многие операции в частично загруженных документах.

• разными атрибутами: в CSS, это elm.style.styleFloat в IE vs elm.style.cssFloat в Firefox. В <label> теги это доступ с elm.htmlFor в IE vs elm.for в Firefox. Обратите внимание, что for зарезервировано в IE so elm['for'] вероятно, лучше остановить IE от создания исключения.

базовый язык JavaScript:

• доступ к символам в строках: 'string'[0] не поддерживается в IE, поскольку это не в исходных спецификациях JavaScript. Использовать 'string'.charAt(0) или 'string'.split('')[0] отметить, что доступ к элементам в массивах значительно быстрее, чем с помощью charAt со строками в IE (хотя есть некоторые начальные расходы при split сначала называется.)

• запятые перед окончанием объектов: например {'foo': 'bar',} не допускаются в IE.

специфические для элемента вопросы:

• получение document из Элемент iframe:

  • Firefox и IE8+: IFrame.contentDocument (IE начал поддерживать это из версии 8.)
  • IE: IFrame.contentWindow.document
  • (IFrame.contentWindow относится к window в обоих браузерах.)

• холст: версии IE до IE9 не поддерживают <canvas> элемент. IE поддерживает VML однако это аналогичная технология, и explorercanvas смогите обеспечить обертку на месте для <canvas> элементы для многих операций. Имейте в виду, что IE8 в режиме соответствия стандартам во много раз медленнее и имеет гораздо больше сбоев, чем в режиме причуд при использовании VML.

• SVG: IE9 поддерживает SVG изначально. IE6-8 может поддерживать SVG, но только с внешние модули с поддержкой только некоторых из этих плагинов Манипуляции с JavaScript.

• <audio> и <video>: поддерживаются только в IE9.

• динамическое создание кнопки: IE document.createElement uncheckable. См. также как вы динамически создаете переключатель в Javascript, который работает во всех браузерах? для того, чтобы обойти этот.

• встроенный JavaScript в <a href> теги и onbeforeunload конфликты в IE: если есть встроенный JavaScript в href часть a тег (например,<a href="javascript: doStuff()"> тогда IE всегда будет показывать сообщение, возвращенное из onbeforeunload если onbeforeunload обработчик удаляется заранее. См. также попросите подтвердить при закрытии вкладки.

• <script> различия событий тегов: onsuccess и onerror не поддерживаются в IE и заменяются IE-специфичным onreadystatechange который запускается независимо от того, удалось ли загрузить или не удалось. См. также JavaScript Безумие для получения дополнительной информации.

размер элемента / положение / прокрутка и положение мыши:

• получение размера/положения элемента: ширина/высота элементов иногда elm.style.pixelHeight/Width в IE, а не elm.offsetHeight/Width, но ни один из них не является надежным в IE, особенно в режиме причуд, и иногда один дает лучший результат, чем другой.

  elm.offsetTop и elm.offsetLeft часто неправильно сообщается, что приводит к неправильному поиску позиций элементов, поэтому всплывающие элементы и т. д. Во многих случаях отключены на несколько пикселей.

  также обратите внимание, что если элемент (или родитель элемента) имеет display of none тогда IE вызовет исключение при доступе атрибуты size / position вместо возврата 0 как Firefox делает.

• получить размер экрана (получение видимой области экрана):

  • Firefox: window.innerWidth/innerHeight
  • IE стандартный режим: document.documentElement.clientWidth/clientHeight
  • режим совместимости в IE: document.body.clientWidth/clientHeight

• положение прокрутки документа / положение мыши: этот на самом деле не определен w3c, поэтому он нестандартен даже в Firefox. Чтобы найти scrollLeft/scrollTop на document:

  • Firefox и IE в режиме совместимости: document.body.scrollLeft/scrollTop
  • IE в стандартном режиме: document.documentElement.scrollLeft/scrollTop

  • Примечание: некоторые другие браузеры использовать 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];
    };
    

  для того, чтобы получить позицию курсора мыши, evt.clientX и evt.clientY на mousemove события дадут положение относительно документа без добавления положения прокрутки таким образом, предыдущая функция должна быть 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]];
   };
  };
  

выбор/диапазон:

• <textarea> и <input> выбор: selectionStart и selectionEnd не реализованы в IE, и на его месте есть собственная система "диапазонов", см. Также позиция курсора в textarea, в символах с самого начала.

• получение выделенного текста в документ:

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

получение элементов по ID:

• document.getElementById о name атрибут в формах (в зависимости от того, что определено первым в документе), поэтому лучше не иметь разных элементов, которые имеют одно и то же name и id. Это относится к тем дням, когда id не был стандартом w3c. document.all (собственническое IE-специфическое свойство) значительно быстрее, чем document.getElementById, но у него есть другие проблемы, поскольку он всегда приоритизирует name до id. Я лично использую этот код, отступая с дополнительными проверками, чтобы быть уверенным:

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

проблемы с только для чтения innerHTML:

• IE делает не поддерживает установка innerHTML col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title и tr элементы. Вот функция, которая работает вокруг этого для элементов, связанных с таблицей:

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

  Также обратите внимание, что IE требует добавления <tbody> до <table> перед добавлением <tr>s в том, что <tbody> элемент при создании с помощью document.createElement, для пример:

  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
  

событие различия:

• получение event переменной: события DOM не передаются функциям в IE и доступны как window.event. Один из распространенных способов получения события-использовать, например,
  elm.onmouseover = function(evt) {evt = evt||window.event}
  значение по умолчанию window.event если evt неопределено.

• ключевые различия кода события: ключевое событие коды сильно различаются, хотя, если вы посмотрите на Quirksmode или JavaScript Безумие, это вряд ли специфично для IE, Safari и Opera снова отличаются.

• событие Mouse различия: на button атрибут в IE-это бит-флаг, который позволяет сразу несколько кнопок мыши:

  • слева: 1 (var isLeft = evt.button & 1)
  • правильно: 2 (var isRight = evt.button & 2)

  • центр: 4 (var isCenter = evt.button & 4)

    модель W3C (поддерживается Firefox) менее гибка, чем модель IE, только с одной кнопкой, разрешенной сразу с левой стороны как 0, так как 2 и центр 1. Заметьте, что, как Петр-Павел Кох упоминает, это очень контр-интуитивный, как 0 обычно означает "нет кнопки".

    offsetX и offsetY are проблематично и, вероятно, лучше избегать их в IE. Более надежный способ получить offsetX и offsetY в IE было бы получить должность относительно расположенного элемента и вычесть его из clientX и clientY.

    Также обратите внимание, что в IE, чтобы получить двойной щелчок в click событие, которое вам нужно зарегистрировать как click и dblclick событие функции. Пожары в Firefox click а также dblclick при двойном щелчок, поэтому IE-специфическое обнаружение необходимо иметь такое же поведение.

• различия в модели обработки событий: как проприетарная модель IE, так и модель Firefox поддерживают обработку событий снизу вверх, например, если есть события в обоих элементах <div><span></span></div> тогда события будут запускаться в span затем на div а не порядок, который они связаны, Если традиционный например,elm.onclick = function(evt) {} был использован.

  события"захвата" обычно поддерживаются только в Firefox и т. д., что вызовет div тут span события в порядке сверху вниз. Т. е. elm.setCapture() и elm.releaseCapture() для перенаправления событий мыши из документа в элемент (elm в этом случае) перед обработкой других событий, но они имеют ряд производительности и других проблем, поэтому, вероятно, следует избегать.

  • Firefox:

    прикрепить: elm.addEventListener(type, listener, useCapture [true/false])
    отключить: elm.removeEventListener(type, listener, useCapture)
    (type например 'mouseover' без on)

  • IE: только одно событие данного типа на элементе может быть добавлено в IE-исключение возникает, если добавлено более одного события того же типа. Также обратите внимание, что this относится к window вместо связанного элемента в функциях событий (так менее полезно):

    прикрепить: elm.attachEvent(sEvent, fpNotify)
    отключить: elm.detachEvent(sEvent, fpNotify)
    (sEvent например 'onmouseover')

• различия атрибутов событий:

  • остановить события от обработки любым другим прослушиванием функции:

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

  • остановить, например, ключевые события от вставки символов или остановки флажков от проверки:

    Firefox: evt.preventDefault()
    IE: evt.returnValue = false
    Примечание: только что вернулся false на keydown, keypress, mousedown, mouseup, click и reset также предотвратит дефолт.

  • получить элемент, который вызвал событие:

    Firefox: evt.target
    IE: evt.srcElement

  • получение элемента, от которого курсор мыши отошел: evt.fromElement в IE evt.target в Firefox, если в onmouseout событие, в противном случае evt.relatedTarget

  • получение элемента, на который переместился курсор мыши: evt.toElement в IE evt.relatedTarget в Firefox, если в onmouseout событие, в противном случае evt.target

  • Примечание: evt.currentTarget (элемент, к которому было привязано событие) не имеет эквивалента в IE.