Каковы распространенные ошибки, которые следует избегать при кодировании javascript для Internet Explorer?

Я собираюсь начать кодирование нового, javascript-тяжелого веб-сайта, но прежде чем я начну, я хотел бы свести к минимуму время отладки в Internet Explorer, заранее зная, что такое причуды. Я не собираюсь слишком беспокоиться об IE6.

Каковы распространенные ошибки/различия, которые следует избегать в javascript-коде, которые отлично работают в других браузерах, но перерыв в Internet Explorer?

Ответы

Ответ 1

Если вы назначаете обработчик событий непосредственно через javascript, event будет автоматически не.

myElement.onclick = function(e) {
    alert(typeof e); // undefined
}

Обходной путь состоит в том, чтобы вытащить window.event.

myElement.onclick = function(e) {
    e = e || window.event;
    alert(typeof e); // this is ok now
}

если вы являетесь обработчиком событий непосредственно на элементе, вы можете указать ссылку event вручную.

<input type="text" onclick="myMethod(event);"></input>

это перекрестный браузер, и это нормально, если вам нужно идти по этому маршруту.

с помощью attachEvent для установки обработчика события автоматически предоставляет объект event в качестве параметра метода.

Ответ 2

Здесь тонкий: если ваш сайт имеет несколько фреймов (или iframes), и у вас есть код Javascript, который иногда обменивается кадрами, IE (6 и 7, не так уверен примерно 8 и 9) очень разборчив в отношении "lineage" объектов Javascript, даже без каких-либо ссылок DOM. Это означает, что если вы связываете объект Javascript практически с любым типом (строки и номера обычно хорошо, но даже экземпляры Date в прошлом вызывали проблемы) от одного кадра к другому, если в какой-то момент позже исходный кадр обновленная с новой страницы, целевая страница получит исключение, если попытается связаться с этим сообщенным объектом. Firefox был довольно мягким в этом отношении, но когда IE-мусор собирает старую страницу, он впоследствии не любит ссылки на объекты Javascript, созданные этой страницей.

Ответ 3

IE (8 и ниже, не уверен около 9) не может обрабатывать обращения к символам в строках типа массивов, например:

var str = 'abc';
var c = str[2];
alert(c)

В большинстве браузеров это будет предупреждать "c", но IE предупреждает "undefined". Для кросс-браузерных причин лучше использовать функцию charAt:

var str = 'abc';
var c = str.charAt(2);
alert(c)

Это также предупредит "c" в IE.

Еще одно небольшое отличие заключается в конечной запятой в объектах и ​​массивах. Это действительно в большинстве браузеров, но вызывает ошибки в IE:

ar = [1,2,3,]

а также

ob = {name:'janet', surname:'walker',}

что может быть весьма раздражающим, если вы не знаете об этом. Обе эти проблемы, вероятно, часто возникают из-за того, что я использую python, но все равно стоит посмотреть.

Ответ 4

Объединить строки с +

var str="";
for (var i = 0; i < max; ++i) {
  str += somefunction(i);
}

В MSIE это может занять несколько минут. Я однажды проверил, где Opera через Firefox закончила через несколько секунд, но MSIE не закончила через 20 минут!

Однако, если использовать массив, MSIE был быстрым:

var str = [];
for (var i = 0; i < max; ++i) {
   str.push( somefunction(i));
}
str = str.join("");

Извините, но не могу найти сообщение, которое я сделал об этом прямо сейчас.

Ответ 5

Двигатель IE JS, до IE9, медленный. Действительно, очень медленно. В сотни и тысячи раз медленнее, чем реализация Mozilla и Webkit.

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

Ответ 6

Internet Explorer.

Хорошо, более серьезный ответ на запятую в другом ответе хорош. Использование рамки может помочь, но это не все. Вам придется иметь дело с перекрестными проблемами браузера. Поэтому убедитесь, что вы тестируете все версии, о которых вы заботитесь.

Ответ 7

Имейте в виду, как Internet Explorer обрабатывает разбор дерева и навигацию дерева, в частности, который существует при разборе httpObjects в целом:

  • xmlNode.textContent ничего не возвращает в Internet Explorer
  • xmlNode.firstChild.nodeValue или что-то, возвращающее значение node, должно использоваться

-

Ответ 8

IE не поддерживает пользовательские события, только DOM-события (да, даже в 9 бета-версии).

Ответ 9

Самая распространенная ошибка при написании сайта, который должен поддерживать IE, - это забыть протестировать в каждой версии.

Вам нужно убедиться, что весь ваш код работает в IE6 (если вы планируете его поддерживать), IE7, IE8 и IE8-in-IE7-mode. А также IE9 (который сейчас находится в бета-версии).

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

Ответ 11

Если вы пытаетесь измерить, сколько времени занимает какое-то время, вы должны знать, что разрешение времени составляет всего около 15 мс в IE, где он равен 1 мс в FF, Chrome и Opera.

Вы можете проверить это самостоятельно с помощью этого кода:

var end,start = new Date().getTime(); //Gets number of milliseconds since epoch
while( (end = new Date().getTime() ) === start); //Wait for the time to change
alert(end-start); // Shows 1 in FF, Chrome and Opera, but 15 or 16 in MSIE

Это было веками и по-прежнему относится к MSIE8, но не является общеизвестным. lincolnk, связанный с запись в блоге Джона Резига от 12 ноября 2008 года в комментарий выше. Я не могу помочь, что немного улыбаюсь, когда читаю это, потому что я знаю это годами, когда Netscape был общим браузером.

Когда я думаю об этом, у меня очень слабое воспоминание о том, что Netscape с самого начала имел низкое разрешение, возможно, читая системное время, которое было обновлено 18,2 раза в секунду, но позже изменило его, чтобы оно давало время с разрешением 1 мс, Однако, поскольку это должно было произойти около 15 лет назад, я не уверен, правильно ли это, и я не собираюсь это доказывать.

Для удобства чтения я использую getTime выше вместо унарного оператора

Ответ 12

IE 7/8 не понимает console.log/dir, если не открыто консольное окно. Это может легко сломать ваш JS, если вы оставите его в среде prod. Всегда

if(window.console)
   console.log('Hello World')

Ответ 13

Используйте фреймворк, например jQuery или Prototype и вам не придется беспокоиться об этом.

EDIT:

Я должен уточнить. Вам будет намного меньше беспокоиться. Например:

  • ActiveXObject vs XMLHttpRequest
  • attachEvent vs addEventListener

Элемент списка -