动态复制<script> elements from external .html file

Question

I have a (partial) html file containing this:

<div id="externalHTML">
External screen.
</div>
<script id="externalScript" type="text/javascript">
    function initScreen() { alert("Alerting from external script"); }
</script>

What I wanted is to load "externalScript" to some other html file "parent.html". First, I tried this:

function loadScreen() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "external.html", true);
            //Unimportant details omitted
                //Parse the response so that I can extract the script and ignore the div.
                var doc = new DOMParser().parseFromString(this.responseText, 'text/html');
                var extScript = doc.getElementById("externalScript");
                var extContainer = document.getElementById('extContainer');
                //Add the script to parent DOM
                screenContainer.appendChild(extScript);
            };
            xhr.send();
        }

This approach inserts the script element in parent DOM but the script is not executed. I have found that by doing this:

...
//Create a copy of the script
var scr2 = document.createElement("script");
scr2.type = "text/javascript";
scr2.text = extScript.text;
//Add the script to parent DOM
screenContainer.appendChild(scr2);
...

The script is properly executed and I can call the "initScreen()" function. Can anyone explain to me what is happening here? Thank you.

Answer 1

Only a semi-educated answer, but I think this has to do with the document part of document.createElement . It's not so common, but a webpage can have multiple documents in it - like an iframe , an svg , or even a MathML document. However, you can't just freely copy nodes between these documents; they have their own namespaces and attached behaviors. So, as you found in your fix, you need to create a matching <script> in your page document instead of using the node in the outside DOMParser .