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

Question

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

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

Answer 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>

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

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

Answer 2

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

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

В большинстве браузеров это выдаст предупреждение 'c', но оповещения IE 'не определены».По кросс-браузерным причинам лучше использовать функцию charAt:

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

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

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

ar = [1,2,3,]

, а также

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

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

Answer 3

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

Answer 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("");

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

Answer 5

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

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

Answer 6

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

Answer 7

Помните, как Internet Explorer обрабатывает синтаксический анализ и навигацию по dom-дереву, в частности, тот, который также существует при синтаксическом анализе объектов httpObject:

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

Answer 8

Internet Explorer.

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

Answer 9

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

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

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

Answer 10

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

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

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 вместо унарного оператора