在百思买网站上，Internet Explorer 8表现出非常奇怪的边角情况行为

Question

我在bestbuy.com上使用IE8时发现了一个bug，但我似乎无法理解为什么会出现这种情况。类似的问题还出现在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原型上的另一个变量中，但这两个尝试都引发了相同的错误。

是什么导致了这个问题?

- Justin Meltzer

---

这对我来说在Bestbuy的网站上运行得很好，在控制台中没有任何问题。虽然它不完全是IE8，但是在IE10中的IE8模式下工作良好。 - Tomas Kirda

@TomasKirda 试着在IE8虚拟机中运行它，然后告诉我它是否可行。 - Justin Meltzer

抱歉绕过问题，但我不明白为什么你不直接使用document.body.appendChild(p)。 - 1nfiniti

@JustinMeltzer：您能提供更精确的URL参考，以便重现问题或提供jsfiddle演示吗？ - Oleg

@JustinMeltzer：在JavaScript控制台中进行测试可能会得出错误的结果。我提醒一下关于JavaScript的一本书和另一篇长篇批评文章，主要是针对书中的某些错误部分。该书的作者根据JavaScript控制台而非JavaScript程序编写了一些关于Web浏览器的声明，所以该书中存在一些错误信息（总的来说还不错）。你真正遇到了什么问题并试图解决呢？你需要在页面上注入一些元素吗？你写了一些浏览器插件吗？你能否创建一个干净的jsfiddle演示，其中包含相同的问题？ - Oleg

Answer 1

编辑

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

看起来，错误与document.body有关，因为页面处于严格模式下而无法使用。在bestbuy上，该模式是由指令引入的：

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

关于Internet Explorer，选项chrome=1会创建一个Google内容框架（GCF），强制页面运行在严格模式下。由于其文档类型标头使用XHTML，因此comcast.com处于严格模式。 有多种方法可以进入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（或任何一个），您必须使用/embedded，然后点击“result”。

所以，让我们从承认这些网站上有一些导致冲突的东西开始吧。

---

我能够在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]);
})()

也许是由于他们的某个插件附加到了身体上。有趣的是，在ie控制台中，这在bestbuy.com上起作用。

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

我浏览了许多插件，但无法找到引起过载或冲突的确切代码行，但它必须存在，很可能是由于嗅探用户代理造成的。

- Travis J

---

有趣。我没有意识到它是特定于 document.body 的。什么样的代码可能会导致这个错误？你能想到任何解决这个错误的方法（同时仍然能够使用 document.body）吗？ - Justin Meltzer

@JustinMeltzer - 我找不到是哪段代码引起了问题。也许是函数调用被拦截了，也许某个iframe被用作预防工具（不太可能），或者body在某些自定义实现中被特别重载了。 - Travis J

Answer 2

调试器说特拉维斯的代码中“'Element'未定义”，当IE8以兼容模式（文档模式：IE7标准）加载页面时，我收到的唯一JS异常是“hasAttribute”不是受支持的方法。但可能我加载的页面与你的不同：你的代码使用了Element，所以异常会与特拉维斯的代码相同。

IE对HTMLDocument和HTMLElement的看法是什么

在IE7中没有'Element'。

- peterfoldi