Очень странное поведение в корневом режиме в Internet Explorer 8 на сайте BestBuy

Я нашел ошибку на bestbuy.com в IE8, и я не могу понять, почему это происходит. Он также встречается в IE8 на сайтах, таких как comcast.com и raymourflanigan.com, но не на google.com или godaddy.com.

Следующий код вызывает ошибку "Invalid procedure call or argument" (в частности, последняя строка - это то, что вызывает ошибку):

var p = document.createElement("p");
var holder = Element.prototype.appendChild;
holder.apply(document.body, [p]);

Это очень странно, потому что я пробовал это на других сайтах в IE8, и это работает как шарм. Я попытался использовать .call вместо .apply и даже сохранить ссылку на исходный метод appendChild на другую переменную в прототипе Element, но обе эти попытки породили ту же ошибку.

Что вызывает это?

Ответ 1

изменить

"Какой код может вызвать эту ошибку?"

Казалось бы, ошибка связана с тем, что document.body недоступна в результате того, что страница находится в строгом режиме. Режим вводится в bestbuy в результате директивы:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Что касается Internet Explorer, опция chrome=1 создает Content Content Frame (GCF), это заставит страницу работать в строгом режиме. comcast.com находится в строгом режиме в результате своего заголовка doctype, используя XHTML.

Существуют различные способы ввода режимов документа в IE

Конечный результат работы страницы в строгом режиме заключается в том, что поверхность рендеринга становится доступной в document.documentElement. Этот код добавит текст и абзац внизу области просмотра:

var p = document.createElement("p");
p.innerHTML = "APPEND";
var holder = Element.prototype.appendChild;
holder.apply(document.documentElement, [p]);

Я сделал эту скрипку, чтобы проверить это поведение: http://jsfiddle.net/LAkQk/

Сначала я решил протестировать это поведение в нескольких браузерах.

Работает без ошибок в chrome, firefox, safari и IE8.

Обратите внимание, что для проверки этого скрипта (или любого действительно) на ie8 вы должны использовать /embedded, а затем нажать "результат".

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

Я смог повторить ошибку, используя IE8 на сайте bestbuy.com, и подтвердить, что он действительно работал на google.com

Однако это не проблема с apply или appendChild за отзыв. Это проблема с передачей document.body. Вы можете проверить это самостоятельно с помощью этого кода на сайте bestbuy.com:

(function(){
 var p = document.createElement("p");
 p.innerHTML = "APPEND";
 var holder = Element.prototype.appendChild;
 var d = document.getElementById("header");
 holder.apply(d, [p]);
})()

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

$("body").append('<p>Append!</p>');

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

Ответ 2

Отладчик говорит: "Элемент" undefined "для кода Travis и единственное исключение JS, которое я получаю при загрузке страницы, это" hasAttribute "- не поддерживаемый метод. Это происходит только тогда, когда IE8 загружает страницу в режиме совместимости (Document Mode: IE7 Standards), но, вероятно, я загружаю другую страницу из вашего: ваш код использует Element, поэтому исключение будет таким же, как для кода Travis. И вот ответ:

Что такое IE для HTMLDocument и HTMLElement

В IE7 нет элемента Element.