Каковы типичные причины, по которым 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 так elm['for'] - это, наверное, лучшая идея, чтобы остановить т. е. от повышения исключение.

---

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

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

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

---

вопросы, связанные с элементами:

• получение document из IFrame:

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

• холст: версии IE до IE9 не поддерживают <canvas> элемент. Т. е. поддерживает ли 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-specific onreadystatechange который запускается независимо от того, удалось ли загрузить или не удалось. Смотрите также JavaScript Madness для получения дополнительной информации.

---

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

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

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

  также обратите внимание, что если элемент (или родитель элемента) имеет display на none затем т. е. будет вызывать исключение при доступе к размер/положение атрибутами вместо того, чтобы возвратить 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 события дадут положение относительно документа без добавления позиции прокрутки таким образом, предыдущая функция должна быть включены:

  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, и на его месте есть собственная система "диапазонов", см. Также положение курсора в текстовой области, в символах с самого начала.

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

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

---

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

• document.getElementById о name атрибут в формах (в зависимости от того, что определено первым в документе), поэтому лучше не иметь разных элементов, которые имеют одно и то же name и id. Это восходит к тем временам, когда id не был стандартом w3c. document.all (проприетарный т. е.-конкретный объект недвижимости) значительно быстрее, чем 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:

• т. е. не не поддерживает установка 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 Madness, это вряд ли относится к IE, Safari и Opera снова отличаются.

• событие Mouse различия: the 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 являются проблематично и, вероятно, лучше избегать их в IE. Более надежный способ получить offsetX и offsetY в IE было бы получить должность относительно расположенного элемента и вычесть его из clientX и clientY.

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

• различия в модели обработки событий: как собственная модель IE, так и модель Firefox поддерживают обработку событий снизу вверх, например, если есть события в обоих элементах <div><span></span></div> тогда события будут запускаться в spanзатем the 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 in 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.