Я собираюсь начать кодирование нового, javascript-тяжелого веб-сайта, но прежде чем я начну, я хотел бы свести к минимуму время отладки в Internet Explorer, заранее зная, что такое причуды. Я не собираюсь слишком беспокоиться об IE6.
Каковы распространенные ошибки/различия, которые следует избегать в javascript-коде, которые отлично работают в других браузерах, но перерыв в Internet Explorer?
Если вы назначаете обработчик событий непосредственно через 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 в качестве параметра метода.
Здесь тонкий: если ваш сайт имеет несколько фреймов (или iframes), и у вас есть код Javascript, который иногда обменивается кадрами, IE (6 и 7, не так уверен примерно 8 и 9) очень разборчив в отношении "lineage" объектов Javascript, даже без каких-либо ссылок DOM. Это означает, что если вы связываете объект Javascript практически с любым типом (строки и номера обычно хорошо, но даже экземпляры Date в прошлом вызывали проблемы) от одного кадра к другому, если в какой-то момент позже исходный кадр обновленная с новой страницы, целевая страница получит исключение, если попытается связаться с этим сообщенным объектом. Firefox был довольно мягким в этом отношении, но когда IE-мусор собирает старую страницу, он впоследствии не любит ссылки на объекты Javascript, созданные этой страницей.
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, но все равно стоит посмотреть.
Объединить строки с +
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("");
Извините, но не могу найти сообщение, которое я сделал об этом прямо сейчас.
Двигатель IE JS, до IE9, медленный. Действительно, очень медленно. В сотни и тысячи раз медленнее, чем реализация Mozilla и Webkit.
Это отображается в минимальном разрешении таймеров анимации, времени завершения сортировки и (как указано выше) фиктивной конкатенации строк и где-либо еще, где производительность вашего сайта ограничена скоростью самого механизма JS.
Internet Explorer.
Хорошо, более серьезный ответ на запятую в другом ответе хорош. Использование рамки может помочь, но это не все. Вам придется иметь дело с перекрестными проблемами браузера. Поэтому убедитесь, что вы тестируете все версии, о которых вы заботитесь.
Имейте в виду, как Internet Explorer обрабатывает разбор дерева и навигацию дерева, в частности, который существует при разборе httpObjects в целом:
xmlNode.textContent ничего не возвращает в Internet ExplorerxmlNode.firstChild.nodeValue или что-то, возвращающее значение node, должно использоватьсяIE не поддерживает пользовательские события, только DOM-события (да, даже в 9 бета-версии).
Самая распространенная ошибка при написании сайта, который должен поддерживать IE, - это забыть протестировать в каждой версии.
Вам нужно убедиться, что весь ваш код работает в IE6 (если вы планируете его поддерживать), IE7, IE8 и IE8-in-IE7-mode. А также IE9 (который сейчас находится в бета-версии).
В области есть несколько ярлыков для тестирования нескольких версий IE, но имейте в виду, что они не всегда дают точно такие же результаты, что и реальные пользователи; единственный способ быть уверенным в том, чтобы действительно протестировать его в реальных версиях IE, какими бы болезненными они ни были.
Следите за небольшими различиями, например, как обрабатываются границы iframe (Как удалить границу IFrame в Javascript).
Я думаю, что тег Internet-explorer должен дать вам много хороших примеров.
Если вы пытаетесь измерить, сколько времени занимает какое-то время, вы должны знать, что разрешение времени составляет всего около 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 выше вместо унарного оператора
IE 7/8 не понимает console.log/dir, если не открыто консольное окно. Это может легко сломать ваш JS, если вы оставите его в среде prod. Всегда
if(window.console)
console.log('Hello World')
Используйте фреймворк, например jQuery или Prototype и вам не придется беспокоиться об этом.
EDIT:
Я должен уточнить. Вам будет намного меньше беспокоиться. Например:
Элемент списка -