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

【问题标题】：Very strange corner-case behavior in Internet Explorer 8 on BestBuy's websiteBestBuy 网站上 Internet Explorer 8 中非常奇怪的极端情况行为
【发布时间】：2013-04-26 02:49:42
【问题描述】：

我在 bestbuy.com 的 IE8 中发现了一个错误，但我似乎无法理解它为什么会发生。它也出现在 comcast.com 和 raymourflanigan.com 等网站的 IE8 中，但不在 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 原型上的另一个变量，但是这两种尝试都抛出了相同的错误。

这是什么原因造成的？

【问题讨论】：

对我来说，这在 bestbuy 网站上运行，在控制台中没有任何问题。虽然不完全是 IE8 而是 IE10 中的 IE8 模式。
@TomasKirda 是的，用虚拟机在 IE8 中尝试一下，让我知道它是否有效。
抱歉绕过这个问题，但我不明白你为什么不简单地使用 document.body.appendChild(p);
@JustinMeltzer：您能否提供更准确的 URL 参考以重现问题或提供jsfiddle 演示？
@JustinMeltzer：在 JavaScript 控制台中进行测试可能会给出不正确的结果。我想起了一本关于 JavaScript 的书，以及另一篇关于书中某些错误部分的长篇评论文章。这本书的作者写了一些关于基于 JavaScript 控制台而不是使用 JavaScript 程序的 Web 浏览器的陈述。所以书中有一些错误的信息（总体来说非常好）。您真正遇到并尝试解决的问题是什么？你需要在页面上注入一些元素吗？你写了一些浏览器插件吗？你能创建一个有同样问题的干净的 jsfiddle 演示吗？

标签： javascript internet-explorer debugging internet-explorer-8

【解决方案1】：

编辑

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

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

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

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

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]);

我制作这个小提琴是为了测试这种行为：http://jsfiddle.net/LAkQk/

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

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

请注意，要在 ie8 上测试这个小提琴（或任何真正的），您必须使用 /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]);
})()

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

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

我查看了许多插件，找不到导致过载或冲突的确切代码行，但它必须存在，很可能是由于嗅探用户代理。

【讨论】：

有趣。没有意识到它特定于document.body。什么样的代码可能会导致此错误？你能想出解决这个错误的任何方法（同时还能使用document.body）吗？
@JustinMeltzer - 我找不到哪个代码是原因。也许函数调用被拦截，也许 iframe 以某种方式被用作预防工具（不太可能），或者 body 可能在某处专门为某种自定义实现而重载。

【解决方案2】：

调试器对 Travis 的代码说“'Element' is undefined”，而我在加载页面时收到的唯一 JS 异常是 'hasAttribute' 是不受支持的方法。两者都仅在 IE8 以兼容模式（文档模式：IE7 标准）加载页面时发生，但可能我加载的页面与您的不同：您的代码使用 Element，因此异常与 Travis 的代码相同。这是答案：

What's IE take on HTMLDocument and HTMLElement

IE7 中没有“元素”。

【讨论】：