javascript - 为什么通过 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 Parsing and Serialization 中有解释规范:

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.