脚本标签创建与div的innerHTML不起作用 [英] script tag create with innerHTML of a div doesn't work

问题描述

这里是js代码

  var wrap = document.createElement（div）; 
 wrap.innerHTML ='< script type =text / javascriptsrc ='+ scriptUrl +'>< / script>'; 
 var wrapscript = wrap.childNodes [0]; 
 document.body.appendChild（wrapscript）
  

正文确实插入了脚本元素，但是js资源没有加载，甚至没有http请求...

谁能告诉我为什么~~

<问题出在Zeptojs的$ method

  $（'< script type =text / javascriptsrc =' + scriptUrl +'>< / script>'）。appendTo（$（bdoy））
  

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

解决方案

这个很简单。

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

使用 innerHTML 时，浏览器将

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




2. 如果有一个context元素，并且context元素的Document处于quirks模式，那么让Document处于怪癖模式。
   否则，如果有一个context元素，并且
   context元素的Document处于有限怪异模式，那么让Document处于
   limited-quirks模式。否则，将文档置于无怪癖模式。




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

以及解析< script> inside

脚本标志设置为启用如果为
启用了脚本，则解析器创建
时解析器与之关联的Document，否则为disabled。

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

所以只要你用 innerHTML 注入它就不会被执行。

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

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

动态更改src，type，charset，async和defer属性没有直接影响;这些属性仅在下面描述的特定时间使用。

结束下面描述的 就是这样，它只是将< script> 注入文档 src 属性$ c>（无论哪个，包括临时的创建时使用 innerHTML 。）

因此，只要您想将脚本注入文档并使其执行，你必须使用 script = document.createElement（'script'）。

设置其属性，如 src 和类型，可能是里面的内容（通过使用 script.appendChild（document.createTextNode（content ））），然后将其附加到 document.body 。

here goes the js code

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

the body did insert the script element,but the js resource was't load,even no http request...

who can tell me why~~

the problem goes with Zeptojs's $ method

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

it works like the code above,and cause the bug

解决方案

This one was trivial.

As stated in spec (8.4 Parsing HTML fragments and 8.2.3.5 Other parsing state flags,) quote:

when using innerHTML the browser will

1. Create a new Document node, and mark it as being an HTML document.

2. If there is a context element, and the Document of the context element is in quirks mode, then let the Document be in quirks mode. Otherwise, if there is a context element, and the Document of the context element is in limited-quirks mode, then let the Document be in limited-quirks mode. Otherwise, leave the Document in no-quirks mode.

3. Create a new HTML parser, and associate it with the just created Document node. ...

and when parsing a <script> inside

The scripting flag is set to "enabled" if scripting was enabled for the Document with which the parser is associated when the parser was created, and "disabled" otherwise.

The scripting flag can be enabled even when the parser was originally created for the HTML fragment parsing algorithm, even though script elements don't execute in that case.

So it won't be executed, as long as you inject it with innerHTML.

And using innerHTML will prevent the <script> element created from being executed permanently.

As stated in spec (4.3.1 The script element,) quote:

Changing the src, type, charset, async, and defer attributes dynamically has no direct effect; these attribute are only used at specific times described below.

Concluding the described below is that, it only parse the src attribute when injecting the <script> to the document (no matter which, including the temporary one created when using innerHTML.)

So, as long as you want to inject a script to the document and make it executed, you have to use script = document.createElement('script').

Set its attributes like src and type, possibly the contents inside (by using script.appendChild(document.createTextNode(content))), then append it to the document.body.

这篇关于脚本标签创建与div的innerHTML不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！