Estou carregando HTML no Ajax, analisando-o comDOMParser e colocar todo ochildNodes do corpo do documento em um fragmento de documento.

Quando adiciono o fragmento ao corpo do documento atual,<script> tags não são executadas.

Eu brinquei e descobri que, se eu os substituir por novas tags de script criadas dinamicamente, elas serão executadas corretamente.

Eu gostaria de saber por que?

Por exemplo.

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

Sem ligarfixScriptsSoTheyAreExecuted, nada será executado.

Outro ponto que acho difícil de seguir é que, se eu tentar simplesmente clonar os nós de script existentes para criar novos usandocloneNode, ele não funciona, o que sugere que as tags de script criadas inicialmente peloDOMParser carrega o estado que os impede de serem executados.