为什么通过DOMParser创建的脚本元素不能执行？ [英] Why script elements created through DOMParser do not execute?

问题描述

我在Ajax中加载HTML，使用 DOMParser 解析它，并将文档正文的所有 childNodes 当我将片段添加到当前文档的正文中时，< script> 标签aren 'b执行。

我弄清楚了，如果我用新的动态创建的脚本标记替换它们，它们会正确执行。

我想知道为什么？

例如

  var html =一些带脚本的脚本< script> alert（'test'）;< / script>; 
 
 var frag = parsePartialHtml（html）; 
 
 
 fixScriptsSoTheyAreExecuted（frag）; 
 
 
 document.body.appendChild（frag）; 
 
 
函数fixScriptsSoTheyAreExecuted（el）{
 var scripts = el.querySelectorAll（'script'），
 script，fixedScript，i，len; 
 
 for（i = 0，len = scripts.length; i< len; i ++）{
 script = scripts [i]; 
 
 fixedScript = document.createElement（'script'）; 
 fixedScript.type = script.type; 
 if（script.innerHTML）fixedScript.innerHTML = script.innerHTML; 
 else fixedScript.src = script.src; 
 fixedScript.async = false; 
 
 script.parentNode.replaceChild（fixedScript，script）; 
 
 
 
 $ b function parsePartialHtml（html）{
 var doc = new DOMParser（）。parseFromString（html，'text / html'） ，
 frag = document.createDocumentFragment（），
 childNodes = doc.body.childNodes; 
 
 while（childNodes.length）frag.appendChild（childNodes [0]）; 
 
 return frag; 
} 
  

不调用 fixScriptsSoTheyAreExecuted ，什么都不会执行。

另外一点我很难理解，如果我试图用 cloneNode ，它不起作用，哪种表明最初由 DOMParser 创建的脚本标记带有阻止它们的状态被执行。

解决方案

这在 DOM解析和序列化规范：

$ parseFromString

parseFromString（str ，类型）方法必须运行这些步骤，
取决于类型：

• text / html

  
  
  

  解析 st r 与 HTML解析器 code> ，并返回新创建的文档。

  
  
  

  脚本标记必须是设置为禁用。

  
  
  

  注意
  
  脚本 元素会被标记为不可执行，并且
  noscript 被解析为标记。 / b>










I'm loading HTML in Ajax, parsing it with DOMParser and put all the childNodes of the document body into a document fragment.

When I add the fragment into the current document's body, <script> tags aren't executed.

I fiddled around and figured out that if I replace them with new dynamically created script tags, they get correctly executed.

I would like to know WHY?

E.g.

var html = "Some html with a script <script>alert('test');</script>";

var frag = parsePartialHtml(html);


fixScriptsSoTheyAreExecuted(frag);


document.body.appendChild(frag);


function fixScriptsSoTheyAreExecuted(el) {
  var scripts = el.querySelectorAll('script'),
      script, fixedScript, i, len;

  for (i = 0, len = scripts.length; i < len; i++) {
    script = scripts[i];

    fixedScript = document.createElement('script');
    fixedScript.type = script.type;
    if (script.innerHTML) fixedScript.innerHTML = script.innerHTML;
    else fixedScript.src = script.src;
    fixedScript.async = false;

    script.parentNode.replaceChild(fixedScript, script);
  }
}


function parsePartialHtml(html) {
  var doc = new DOMParser().parseFromString(html, 'text/html'),
      frag = document.createDocumentFragment(),
      childNodes = doc.body.childNodes;

  while (childNodes.length) frag.appendChild(childNodes[0]);

  return frag;
}

Without calling fixScriptsSoTheyAreExecuted, nothing will execute.

Another point that I find hard to follow is that if I try to simply clone the existing script nodes to create new ones using cloneNode, it doesn't work, which kinds of suggest that the script tags that were initially created by the DOMParser carries state that prevent them from being executed.

解决方案

This is explained in the DOM Parsing and Serialization spec:

parseFromString

The parseFromString(str, type) method must run these steps, depending on type:

• "text/html"

  Parse str with an HTML parser, and return the newly created document.

  The scripting flag must be set to "disabled".

  Note
  script elements get marked unexecutable and the contents of noscript get parsed as markup.

这篇关于为什么通过DOMParser创建的脚本元素不能执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！