使用div的innerHTML创建的脚本标签不起作用
这是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"))
它的工作方式类似于上面的代码,并导致该错误。
回答:
这是微不足道的。
如规范中所述8.4解析HTML片段和8.2.3.5其他解析状态标志,)引用:
使用innerHTML
浏览器时_
- 创建一个新的Document节点,并将其标记为HTML文档。
2.
如果存在一个context元素,并且context元素的Document处于quirks模式,则让Document处于quirks模式。否则,如果存在一个context元素,并且context元素的Document处于受限怪癖模式,则让Document处于受限怪癖模式。否则,将文档保留为非怪异模式。
- 创建一个新的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
。
以上是 使用div的innerHTML创建的脚本标签不起作用 的全部内容, 来源链接: utcz.com/qa/431305.html