问题
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.
回答1:
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.
来源:https://stackoverflow.com/questions/28112807/why-script-elements-created-through-domparser-do-not-execute