这是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浏览器时_
innerHTML
2. 如果存在一个context元素,并且context元素的Document处于quirks模式,则让Document处于quirks模式。否则,如果存在一个context元素,并且context元素的Document处于受限怪癖模式,则让Document处于受限怪癖模式。否则,将文档保留为非怪异模式。
当解析<script>内部时
<script>
如果在创建解析器时为与解析器关联的文档启用了脚本,则将脚本标记设置为“已启用”,否则为“禁用”。
即使最初为HTML片段解析算法创建了解析器,也可以启用脚本标记,即使在这种情况下脚本元素不执行也是如此。
因此,只要您注入,它就不会执行innerHTML。
使用innerHTML将阻止创建 的 <script>元素永久执行。
如规范(4.3.1脚本元素,)所述:
动态更改src,type,charset,async和defer属性不会产生直接影响。这些属性仅在以下所述的特定时间使用。
得出 _以下_结论是,它仅src在将注入<script>到时解析属性document(无论哪个,包括使用时创建的临时属性innerHTML)。
src
document
因此,只要要将脚本注入文档并使其执行,就必须使用script = document.createElement('script')。
script = document.createElement('script')
将其属性设置为src和type,并可能在其中设置内容(使用script.appendChild(document.createTextNode(content))),然后将其附加到document.body。
type
script.appendChild(document.createTextNode(content))
document.body