小编典典

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

javascript

这是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"))

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


阅读 1041

收藏
2020-05-01

共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')

将其属性设置为srctype,并可能在其中设置内容(使用script.appendChild(document.createTextNode(content))),然后将其附加到document.body

2020-05-01