脚本标签创建与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)

正文确实插入了脚本元素,但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处于怪癖模式.否则,如果存在上下文元素,并且上下文元素的Document处于有限怪异模式,则让Document处于有限怪癖模式.否则,将文档保留为无怪癖模式.

3. 创建一个新的HTML解析器,并将其与刚刚创建的Document节点相关联....

并在解析<script>内部时

如果为创建解析器时与解析器关联的Document启用了脚本,则脚本标志设置为"enabled",否则为"disabled".

即使在最初为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.

Answer 2

当您无法控制插入机制并且被迫使用带有script信标的innerHTML 时，一个可能的解决方案是从“幽灵”节点重建DOM 节点。

这是广告技术行业中反复出现的问题，其中许多自动化系统会复制任意 HTML 代码（又名广告服务器 ^^）。

在 Chrome 中运行良好：

var s = wrap.getElementsByTagName('script');
for (var i = 0; i < s.length ; i++) {
  var node=s[i], parent=node.parentElement, d = document.createElement('script');
  d.async=node.async;
  d.src=node.src;
  parent.insertBefore(d,node);
  parent.removeChild(node);
}

（你可以在 JSFiddle 中测试它）