使用div的innerHTML创建的脚本标签不起作用

Question

这是JS代码：

var wrap = document.createElement("div");
wrap.innerHTML = '<script type="text/javascript" src="'+scriptUrl+'"></script>';
var wrapscript = wrap.childNodes[0];
document.body.appendChild(wrapscript)

主体确实插入了script元素，但是没有加载JS资源，甚至没有http请求。

有人可以解释为什么会这样吗？

问题出在Zeptojs的$方法上

$('<script type="text/javascript" src="'+scriptUrl+'"></script>').appendTo($("bdoy"))

它的工作方式类似于上面的代码，并导致该错误。

Answer 1

这是微不足道的。

如规范中所述8.4解析HTML片段和8.2.3.5其他解析状态标志，）引用：

使用innerHTML浏览器时_

1. 创建一个新的Document节点，并将其标记为HTML文档。

2.
如果存在一个context元素，并且context元素的Document处于quirks模式，则让Document处于quirks模式。否则，如果存在一个context元素，并且context元素的Document处于受限怪癖模式，则让Document处于受限怪癖模式。否则，将文档保留为非怪异模式。

1. 创建一个新的HTML解析器，并将其与刚创建的Document节点相关联。…

当解析<script>内部时

如果在创建解析器时为与解析器关联的文档启用了脚本，则将脚本标记设置为“已启用”，否则为“禁用”。

即使最初为HTML片段解析算法创建了解析器，也可以启用脚本标记，即使在这种情况下脚本元素不执行也是如此。

因此，只要您注入，它就不会执行innerHTML。

使用innerHTML将阻止创建 的 <script>元素永久执行。

如规范（4.3.1脚本元素，）所述：

动态更改src，type，charset，async和defer属性不会产生直接影响。这些属性仅在以下所述的特定时间使用。

得出 _以下_结论是，它仅src在将注入<script>到时解析属性document（无论哪个，包括使用时创建的临时属性innerHTML）。

因此，只要要将脚本注入文档并使其执行，就必须使用script = document.createElement('script')。

将其属性设置为src和type，并可能在其中设置内容（使用script.appendChild(document.createTextNode(content))），然后将其附加到document.body。