为啥我不能在 IE 中将包含脚本标签的字符串添加到 innerHTML

Posted 2023-05-07

【中文标题】为啥我不能在 IE 中将包含脚本标签的字符串添加到 innerHTML

【英文标题】：Why can't I add a string containing a script tag to innerHTML in IE为什么我不能在 IE 中将包含脚本标签的字符串添加到 innerHTML

【发布时间】：2010-11-07 07:10:45

【问题描述】：

我正在尝试执行以下操作（我正在使用原型库）：

var div = document.createElement('div');
div.innerhtml = '<script src="somescript.js"></script>';
$('banner').insert(div);

在IE中，div.innerHTML属性在我在第二行设置属性后总是等于""。

这个 sn-p 在一个函数内部，该函数在外部供应商脚本中覆盖 document.write()，所以这就是我这样做的原因，而不是创建一个脚本元素并将其直接附加到 div 元素。

任何帮助都将不胜感激，这让我白发苍苍！

【参考方案1】：

这个也让我受阻了一点。事实证明，IE 不允许直接通过 innerHTML 插入 JS，除非您包含 'defer' 属性（请参阅下面的第二个链接）。此属性是 IE 独有的，并且显然允许 IE 将任何 JS 的执行推迟到加载其他标记之后。但是，一个警告...如果您包含两个脚本标签（就像我所做的那样），则无法保证哪个会首先执行，因为脚本似乎是异步加载的。如果您的脚本相互依赖（就像我的那样），这应该只是一个问题。

还有一个额外的警告......您必须在插入脚本的同时插入非脚本标记。我无法自己插入脚本标签，不管有没有'defer'属性。最后，必须在插入所有其他非脚本标记之后放置脚本标记。否则，脚本标签将从插入的 HTML 中删除。

以下是一些参考资料：

MS innerHTML 参考：

http://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx

MS Defer 属性参考：

http://msdn.microsoft.com/en-us/library/ms533719%28v=vs.85%29.aspx

通过代码插入脚本的示例（是的，它确实有效）：

http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/insertScript_2.htm

我的测试代码：

// I downloaded the MS example file above and tweaked their script a bit, 
// resulting in this.  Using the proper approach to the defer property 
// (namely: defer="defer") did not provide me with consistent results, so 
// sticking with 'DEFER' may be necessary.
// Note:  Try moving the 'sHTML' variable to the end of the script string.
function insertScript2()

    var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
    var sScript = sHTML + "<SCRIPT DEFER type='text/javascript'> function go2() alert('Hello from inserted script.')  </SCRIPT" + ">";
    ScriptDiv.innerHTML = sScript;

【参考方案2】：

您的脚本标签可能正在设法独立解释。试试：

div.innerHTML = '<scr' + 'ipt src="somescript.js"></scr' + 'ipt>';

【讨论】：

这是在代码中使用脚本标签的常见问题，很可能是这里的问题

这很有趣。你能详细说明一下吗？

相当多的浏览器会像这样破坏明显的脚本注入。不过，解决方法是正确的 - 以一种仍然有效的方式自行修改它。

在 IE 中尝试了以下操作 - 在 IE7 模式下使用 IE8 和开发者工具调试器，值不会出现在 div 中：

我怀疑您可能需要在 div 已经在 DOM 中（在 appendChild 之后）之后设置 innerHTML 才能使脚本正常工作。

【参考方案3】：

您可以尝试这样做：

function loadScript(src) 
       var script = document.createElement("script");
       script.type = "text/javascript";
       document.getElementsByTagName("head")[0].appendChild(script);
       script.src = src;

或者做

..
div.innerHTML = "<script src=\"somescript.js\"></script>";
..

【讨论】：

我也更喜欢第一个。它更清洁且可重复使用。如果他不想使用第一种方法，他们的第二个只是一个“尝试”的建议:)

我有一种模糊的感觉，OP 的问题实际上是一个安全功能在起作用，而您在这里的第一个答案是传统（非阻塞！）解决方案。

同意，我通常会这样做，但正如我所说，有一个外部供应商脚本正在执行：document.write('');我不知道 src 会是什么。我们在部分页面刷新（ajax）之后调用这个脚本并且 document.write 呈现一个新页面，因此我在我的脚本中覆盖 document.write 以尝试将脚本附加到页面而不是允许 document.write发生。我应该更清楚地了解情况。这一切都有意义吗？

我离开了遇到此问题的公司。该问题最终与外部供应商脚本有关，但如果不是，我认为第一个解决方案将是我解决此类问题的首选方法。

-1，第一个版本在不允许动态脚本加载的现代浏览器中失败。

【参考方案4】：

</script> 需要使用转义字符

div.innerHTML = '<script src="somescript.js"><\/script>';

见why escaping / in javascript '<\/script>'?

【参考方案5】：

您是否尝试过添加内联 JS 而不是加载 .js 文件？我过去做过这件事，对我来说效果很好。不确定这是否仍然适用于最新的浏览器/安全问题。

HTH。