javascript - BestBuy 网站上 Internet Explorer 8 中非常奇怪的极端情况行为

Question

我在 bestbuy.com 上发现了一个 IE8 错误，我似乎无法理解为什么会出现这种错误。它也在 IE8 中出现在 comcast.com 和 raymourflanigan.com 等网站上，但不会出现在 google.com 或 godaddy.com 上。

以下代码抛出一个“无效的过程调用或参数”错误(特别是最后一行抛出错误):

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

这很奇怪，因为我已经在 IE8 的其他网站上尝试过它，而且效果很好。我尝试使用 .call 而不是 .apply，甚至将对原始 appendChild 方法的引用存储到 Element 上的另一个变量 原型(prototype)，但是这两种尝试都抛出了同样的错误。

这是什么原因造成的？

Answer 1

编辑

“什么样的代码可能会导致这个错误？”

错误似乎与 document.body 由于页面处于严格模式而无法使用有关。作为指令的结果，在 bestbuy 进入模式:

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

关于 Internet Explorer，选项 chrome=1 创建一个 Google Content Frame (GCF) 将强制页面以严格模式运行。由于使用 XHTML 的 doctype header ，comcast.com 处于严格模式。

There are various ways to enter document modes in IE

页面处于严格模式的最终结果是呈现表面在 document.documentElement 处变得可用。此代码将在查看区域的底部附加文本和一段:

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

---

我做了这个 fiddle 来测试这个行为:http://jsfiddle.net/LAkQk/

我首先决定在多个浏览器中测试这种行为。

在 chrome、firefox、safari 和 IE8 中运行没有错误。

请注意，要在 ie8 上测试此 fiddle (或任何真正的 fiddle )，您必须使用 /embedded 然后单击“结果”。

因此，让我们首先确认这些网站上存在导致冲突的内容。

---

我能够在 bestbuy.com 上使用 IE8 重复错误，并确认它在 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]);
})()

也许是因为他们的插件之一附着在 body 上。有趣的是，这可以在 bestbuy.com 的 ie 控制台上运行

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

我查看了许多插件，找不到导致过载或冲突的确切代码行，但它肯定在那里，很可能是嗅探用户代理的结果。