为什么通过DOMParser创建的脚本元素不会执行？

Question

我在Ajax中加载HTML,解析它DOMParser并将所有childNodes文档主体放入文档片段中.

当我将片段添加到当前文档的正文中时,<script>不会执行标记.

我摆弄并想出如果我用新动态创建的脚本标签替换它们,它们就会被正确执行.

我想知道为什么？

例如

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;
}

没有打电话fixScriptsSoTheyAreExecuted,什么都不会执行.

我发现难以理解的另一点是,如果我尝试简单地克隆现有脚本节点以使用创建新节点cloneNode,则它不起作用,哪种类型建议最初由DOMParser进位状态创建的脚本标记阻止他们被处决了.

Answer 1

这在DOM解析和序列化规范中有解释:

parseFromString

该parseFromString(str, type)方法必须运行以下步骤,具体取决于类型:

• "text/html"

  解析str一个HTML parser,并返回新创建的文档.

  该脚本标志必须设置为"已禁用".

  注释
  script元素标记为不可执行,并且get的内容 noscript被解析为标记.