javascripthtmldynamic-script-loading

Why script elements created through DOMParser do not execute?

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.

Solution

  • This is explained in the DOM Parsing and Serialization spec:

    parseFromString

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