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

108

Я разработал несколько улучшенных страниц с javascript, которые отлично работают в последних версиях Firefox и Safari. Я пропустил проверку в Internet Explorer, и теперь обнаружил, что страницы не работают в IE 6 и 7 (пока). Скрипты почему-то не выполняются, страницы выглядят так, как будто javascript не было, хотя какой-то javascript выполняется. Я использую собственные библиотеки с манипуляциями с dom, из YUI 2 я использую YUI-Loader и XML-Http-Request, а на одной странице я использую «psupload», который зависит от JQuery.

Я устанавливаю Microsoft Script Editor из Office XP и теперь буду выполнять отладку. Я тоже сейчас напишу конкретные тесты.

Каковы типичные недостатки IE? В каком направлении я могу держать глаза открытыми.

Я нашел эту страницу, на которой видны некоторые различия. посетите: Quirksmode

Можете ли вы по своему опыту назвать некоторые типичные вещи, которые мне следует искать в первую очередь?

Позже я также задам дополнительные вопросы по конкретным задачам, а пока меня интересует ваш опыт, почему IE обычно не работает в сценариях, которые нормально работают в Firefox.

Изменить: Спасибо за все эти отличные ответы!

Тем временем я адаптировал весь код, чтобы он также работал с Internet Explorer. Я интегрировал jQuery и теперь построил на нем свои собственные классы. Это была моя основная ошибка, я не создавал все свои вещи на jQuery с самого начала. Теперь у меня есть.

Также мне очень помог JSLint.

И помогли многие отдельные вопросы из разных ответов.

user89021
источник
Пока что нет проблем с css или стилем, насколько я знал из предыдущего кода. Только проблемы с JS - karlthorwald
user89021 08
1
Сейчас я сначала запускаю JSLint для всех файлов, некоторые из них я никогда не адаптировал.
user89021 08
7
«Это была моя основная ошибка, я не создавал все свои вещи на jQuery с самого начала». - он не решит все ваши кроссбраузерные проблемы волшебным образом. Поищите stackoverflow для jQuery и IE, и вы обнаружите массу проблем. Лучше всего самостоятельно изучить кросс-браузерные сценарии, чтобы в случае сбоя jQuery или одного из миллиардов его схематичных подключаемых модулей вы могли реализовать реально работающее кросс-браузерное решение и знать, что оно работает и почему.
Dagg Nabbit
11
+1 К комментарию "нет" выше. Вам намного лучше полностью избегать jQuery. IFF вы изучаете javascript - jQuery невероятно полезен, если вы хотите быстро и легко выполнить что-то сложное, но если вы учитесь, он защитит вас от сложностей понимания того, как на самом деле javascript работает - слишком многие люди, кажется, знают jQuery, но понятия не имеют, как писать javascript. Вы не совершили ошибки, не построив изначально jQuery - теперь вы гораздо лучше понимаете свой собственный код, чем если бы вы его понимали.
lucideer

Ответы:

121

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

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


Общее:

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

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


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

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

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


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

  • Получение documentIFrame :

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

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

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

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

  • Динамическое создание переключателей: IE <8 имеет ошибку, из-за которой переключатели, созданные с document.createElementотключенным флажком, становятся недоступными. См. Также Как динамически создать переключатель в Javascript, который работает во всех браузерах? для способа обойти это.

  • Встроенный JavaScript в <a href>теги и onbeforeunloadконфликты в IE: Если в hrefчасти aтега есть встроенный JavaScript (например, <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из, noneто IE вызовет исключение при доступе к атрибутам размера / положения, а не возвращается, 0как это делает Firefox.

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

    • Fire Fox: 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]];
     };
    };

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


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

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

Проблемы с внутренним HTML только для чтения:

  • 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 требует добавления a <tbody>к a <table>перед добавлением <tr>s к этому <tbody>элементу при создании using 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.eventif evtundefined.

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

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

    • Осталось: 1 ( var isLeft = evt.button & 1)
    • Справа: 2 ( var isRight = evt.button & 2)
    • Центр: 4 ( var isCenter = evt.button & 4)

      Модель W3C (поддерживаемая Firefox) менее гибкая, чем модель IE, с одновременным разрешением только одной кнопки с левым as 0, right as 2и центром as 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 то в , divа не порядок , который они связаны, если использовалось традиционное, например elm.onclick = function(evt) {}.

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

    • Fire Fox:

      Присоединить : 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.

крио
источник
12
Очень-очень-очень красивый список! Спасибо всем, кто внес свой вклад :)
cwap
26

Также проверьте наличие запятых, таких как эти или подобные, если они есть в вашем коде

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

последняя запятая (следующая за значением2) будет разрешена Firefox, но не IE

Лука Рокки
источник
1
Самые хорошие редакторы должны уловить это
SeanJA
1
+1, у меня такое было слишком часто.
Дэвид В.
1
Я бы поставил тебе +10, если бы мог - такое случается со мной все время.
Джош
О, и добавить к комментарию @ SeanJA: я недавно переключился на NetBeans, который это улавливает.
Джош
Я потерял так много часов в первый раз, когда работал с JS. Теперь это первое, что я проверяю! Проклинайте дрянные расширения Textmate, оставляя запятые.
Агос,
12

Если вы будете использовать jQuery или YUI в качестве тегов для вашего сообщения, у вас должны быть минимальные различия между браузерами ... вот для чего нужны фреймворки, чтобы позаботиться об этих кроссбраузерных различиях за вас.

Для примера посмотрите на страницу обхода quirksmode DOM , согласно которой IE не поддерживает большинство вещей ... в то время как true, фреймворки поддерживают elem.childElementCount, например IE не поддерживает , но в jQuery: $(elem).children().size()работает, чтобы получить это значение, в каждом браузере. Вы найдете что-то в библиотеке для обработки 99% неподдерживаемых случаев в браузерах, по крайней мере, со сценарием ... с CSS вам, возможно, придется перейти к плагинам для библиотеки, типичный пример этого - получить закругленные углы работает в IE ... так как он не поддерживает CSS.

Однако, если вы начинаете делать что-то напрямую, например document.XXX(thing), тогда вы не в библиотеке, вы делаете javascript напрямую (это все javascript, но вы понимаете суть :), и это может вызвать или не вызвать проблемы, в зависимости от того, как пьяная команда IE при реализации этой конкретной функции.

С IE у вас больше шансов потерпеть неудачу при правильном оформлении стиля, чем на необработанных проблемах с javascript, анимации на несколько пикселей и тому подобном, гораздо больше, конечно, в IE6.

Ник Крейвер
источник
Теперь я понимаю лучше. Да, я тоже делал такие вещи напрямую. karlthorwald
user89021 08
1
Если вы используете IDE, такую ​​как Netbeans, вы можете установить целевые браузеры для своего javascript, и это также поможет, предупредив вас, когда вы сделаете что-то, что, похоже, не поддерживается.
SeanJA
10

getElementbyID также будет соответствовать атрибуту name в IE, но не в других браузерах, и IE выберет то, что найдет первым.

пример:

<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
GSto
источник
3
извините за грубость, но IE действительно уродлив
user89021 08
12
document.getElementByIdOrNameIGuessWhateverMan (id);
JulianR
5

Существует множество вещей, но я попадал в одну ловушку, заключающуюся в том, что многие браузеры принимают JSON без имен в кавычках, а ie6 и ie7 - нет.

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

Изменить : чтобы уточнить, это проблема только тогда, когда требуется фактический JSON, а не литерал объекта. JSON - это подмножество синтаксиса объектного литерала и подразумевается как формат обмена данными (например, XML), поэтому он разработан, чтобы быть более разборчивым.

Jakob
источник
2
Обратите внимание, что это зависит от контекста, литерал объекта в порядке, JSON - нет ... но, например, jQuery вообще не допускает недопустимый JSON в своей последней версии.
Ник Крейвер
Не мой голос против ... но вы должны прояснить это для других, затем +1 от меня.
Ник Крейвер
5

Различная поддержка JavaScript

IE не поддерживает (большинство) расширений, добавленных в JavaScript с версии 1.5.

Новое в версии 1.6

  • Методы массива - indexOf(), lastIndexOf(), every(), filter(), forEach(), map(),some()
  • for each ... in - перебирает значения вместо имен свойств.

Новое в версии 1.7

Новое в 1.8

  • Методы массива - reduce(),reduceRight()
  • Ярлыки для определения функций.

Некоторые из этих вещей требуют, чтобы вы указали номер версии JavaScript для запуска (который не работает в IE), но некоторые вещи, такие как, [1,2,3].indexOf(2)могут показаться не такими уж важными, пока вы не попытаетесь запустить его в IE.

gnarf
источник
1
JavaScript, о котором вы здесь говорите, - это JavaScript (TM) от Mozilla, а не javascript в более общем смысле. Не следует ожидать, что все реализации ECMAScript / движки javascript (в данном случае MS JScript) будут следовать JavaScript (TM) Mozilla. Стандартным является ECMAScript, а не JavaScript (TM), а JavaScript (TM) - не javascript. Надеюсь, это имело смысл.
Dagg Nabbit
Для меня это имеет смысл, но в теме о совместимости между JavaScript и JScript я подумал, что это уже будет понятно :)
gnarf
Когда вы говорите «IE не поддерживает (большинство) расширений, добавленных в JavaScript с версии 1.5.», Это звучит так, как будто вы говорите, что JavaScript (TM) от Mozilla является стандартом, которого IE должен придерживаться, хотя, конечно, это не так. Вы могли бы, по крайней мере, сказать Mozilla JavaScript или аналогичный ... другой браузер не поддерживает все расширения Mozilla для ECMAScript, такие как назначение деструктуризации и т. Д. Вопрос касался различий между 'большинством' javascriptи (конкретной реализацией) JScript, а не различий между Mozilla JavaScript(TM)и JScript. Было бы лучше показать, где IE отличается от ES.
Dagg Nabbit
3

Основные различия между JavaScript в IE и JavaScript в современных браузерах (например, Firefox) могут быть отнесены к тем же причинам, что и различия в кроссбраузерности CSS / (X) HTML. Когда-то не было стандарта де-факто; IE / Netscape / Opera вели войну за территорию, реализуя большинство спецификаций, но также опуская некоторые из них, а также создавая собственные спецификации, чтобы получить преимущества друг перед другом. Я мог бы продолжить, но давайте перейдем к выпуску IE8: JavaScript избегали / презирали в течение многих лет, а с появлением FF и пренебрежением к webcomm IE решил сосредоточиться в основном на продвижении своего CSS с IE6. И в основном оставил поддержку DOM. Поддержка DOM в IE8 может быть такой же, как и в IE6, выпущенном в 2001 году ... так что поддержка DOM в IE почти на десять лет отстает от современных браузеров. Если у вас есть несоответствия JavaScript, характерные для механизма компоновки, лучше всего атаковать его так же, как мы взяли на себя проблемы с CSS; Ориентация на этот браузер. НЕ ИСПОЛЬЗУЙТЕ ОБРАБОТКУ БРАУЗЕРА, используйте обнаружение функций, чтобы обнаружить ваш браузер / его уровень поддержки DOM.

JScript не является собственной реализацией ECMAScript IE; JScript был ответом IE на JavaScript Netscape, оба из которых появились до ECMAScript.

Что касается атрибутов типа в элементе скрипта, type = "text / javascript" является стандартом по умолчанию (по крайней мере, в HTML5), поэтому вам никогда не понадобится атрибут типа, если ваш скрипт не является JavaScript.

Поскольку IE не поддерживает innerHTML ... innerHTML был изобретен IE и до сих пор НЕ является стандартом DOM. Другие браузеры приняли его, потому что он полезен, поэтому вы можете использовать его в разных браузерах. Что касается динамически изменяющихся таблиц, MSDN сообщает, что «из-за специфической структуры, требуемой таблицами, свойства innerText и innerHTML объектов table и tr доступны только для чтения». Я не знаю, насколько это было правдой изначально, но очевидно, что современные браузеры поняли это, имея дело со сложностями компоновки таблиц.

Я настоятельно рекомендую прочитать PPK по JavaScript Джереми Кейта « Сценарии DOM» Дугласа Крокфорда « JavaScript: хорошие части» и Кристиана Хеллмана « Начальный JavaScript с DOM-сценариями и Ajax», чтобы получить четкое представление о JavaScript.

Что касается фреймворков / библиотек, если вы еще не очень хорошо разбираетесь в JavaScript, вам следует их избегать. 2 года назад я попал в ловушку jQuery, и, хотя мне удалось добиться великолепных результатов, я ни черта не узнал о правильном кодировании JavaScript. Оглядываясь назад, можно сказать, что jQuery - это потрясающий набор инструментов DOM, но моя неспособность научиться правильным замыканиям, прототипному наследованию и т. Д. Не только вернула мои личные знания, но и моя работа начала сильно падать по производительности, потому что я понятия не имел, что я делаю.

JavaScript - это язык браузера; если вы клиентский / интерфейсный инженер, крайне важно, чтобы вы использовали JavaScript. Node.js представляет JavaScript на полную катушку, я вижу огромные успехи, предпринимаемые ежедневно в его разработке; Серверный JavaScript станет стандартом в самом ближайшем будущем. Я упоминаю об этом, чтобы еще раз подчеркнуть, насколько важен JavaScript сейчас и будет.

JavaScript вызовет больше волнений, чем Rails.

Удачного сценария!

Альберт
источник
2
Хороший ответ, хотя я не согласен с использованием функции обнаружения функций для обнаружения браузера; используйте функцию обнаружения только для проверки поддержки этих функций. Также см. Примеры в разделе « Обнаружение функций - это не обнаружение браузера» .
Marcel Korpel
Мех. Я полностью согласен с вашим несогласием. спасибо, что уловили это. Я все еще неопытный JavaScript, но в моей игре нет ничего постыдного. «Обнаружение браузера на основе функций - это очень плохая практика, которой следует избегать любой ценой. Прямое обнаружение функций - лучшая практика, и почти в каждом случае это именно то, что вам нужно».
albert
2

Некоторые собственные объекты доступны только для чтения, но на самом деле это не так (вы можете писать в них, но это не имеет никакого эффекта). Например, обычный расширенный JavaScript основан на расширенииElement объекта путем переопределения системных методов, скажем, изменения Element.prototype.appendChild (), чтобы сделать больше, чем добавление дочернего узла - скажем, инициализировать его с помощью родительских данных. В IE6 это не сработает - исходный метод будет вызываться для новых объектов вместо нового.

Некоторые браузеры (я не помню, какие сейчас) рассматривают новые строки между тегами HTML как текстовые узлы, а другие - нет. Таким образом, childNodes (n), nextSibling (), firstChild () и т.п. будут вести себя по-разному.

SF.
источник
2

Конечные запятые в массивах и объектных литералах раньше были проблемой, недавно не проверялись (имеется в виду IE8):

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

Это вызовет дополнительный код при создании таких структур на стороне сервера.

npup
источник
2

Я только что нашел один сегодня утром, коллега установил тег сценария как: <script type="application/javascript">потому что его автозаполнение ide было перед "text / javascript"

Но оказывается, что IE просто игнорирует весь скрипт, если вы используете «application / javascript», вам нужно использовать «text / javascript»

Katjones
источник
javascript используется по умолчанию во всех браузерах, так что используйте просто<script>
Лаури
2

Буквально на днях я обнаружил странную причуду с Internet Explorer. Я использовал YUI и заменил содержимое тела таблицы (), установив innerHTML

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

Это будет работать во всех браузерах, ЗА ИСКЛЮЧЕНИЕМ IE. Наконец я обнаружил, что вы не можете заменить innerHTML таблицы в IE. Мне пришлось создать узел с помощью YUI, а затем добавить этот узел.

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

Было интересно понять это!

Джастин
источник
1
Такое ощущение, что <tbody>тегами нужно заворачивать .
Кейси Чу
В исходном коде он фактически заключен в тег <tbody>. Я до сих пор поражаюсь, что IE это не понравилось. Я помню, как читал об этом в официальных документах Microsoft, но сейчас не могу найти ссылку. Сожалею!
Джастин
1

Раньше лишние запятые и отсутствующие запятые были обычной проблемой в IE, в то время как он плавно работает с FF.

Глубокий
источник
1

IE очень строго относится к отсутствию ";" так обычно бывает.

Sam3k
источник
Я нахожу многие из них, пока пользуюсь jsLinting. Кажется, это важный момент.
user89021 08
1

Как бы то ни было, я столкнулся с этой неприятной проблемой в <IE9

скажем, у вас есть такой html:

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

и по какой-то причине (у меня был хороший) вам нужно получить весь HTML в таблице перед последним закрывающим TR, вы можете попробовать что-то вроде этого:

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

<IE9 здесь ничего не вернет (-1), потому что переменная tableHtml содержит все теги html в верхнем регистре, а lastIndexOf чувствителен к регистру. Чтобы обойти это, мне пришлось добавить toLowerCase () перед lastIndexOf.

тупица
источник
0

IE не является современным браузером и следует только за ECMAScript.

Роб
источник
0

Вы упомянули jQuery, с которым я менее знаком, но для общей справки, в частности с Prototype, нужно остерегаться зарезервированных слов / имен методов в IE. Я знаю, что меня часто беспокоят такие вещи, как:

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

(new Element (tagName, propertyHash) - это способ создания новых элементов в Protitype). В IE for:должно быть 'for':, потому что forэто зарезервированное слово. В этом есть смысл - но FireFox это допустит.

Другой пример:

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

( wrapметод в Prototype оборачивает один элемент в другой) - В IE в текстовых областях wrapэто свойство, и его Element.wrap()следует использовать вместо методизированной версии

Это два примера, которые приходят на ум из моего опыта. Они основаны на прототипе, но основная проблема не в этом: остерегайтесь любых методов / меток / идентификаторов, которые IE считает зарезервированными словами, а FireFox или Safari допускают.

Джош
источник
0

Дело в том, что IE не поддерживает JavaScript ... Он поддерживает свою собственную реализацию ECMAScript: JScript ... которая немного отличается ...

xavierm02
источник
0

Использование console.log()для вывода ошибок в консоль ошибок Firefox приведет к сбою ваших скриптов в IE. Не забудьте убрать их при тестировании в IE.

Эрикк Росс
источник
Я считаю, что использование console.log также не сработает даже в Firefox, если у вас не включен FireBug.
ejel 03