Question

我有一个（部分）html文件，其中包含：

＆＃xA;＆＃xA;

 ＆lt; div id =“externalHTML”＆gt;＆＃xA;外部屏幕。＆ #xA;＆lt; / div＆gt;＆＃xA;＆lt; script id =“externalScript”type =“text / javascript”＆gt;＆＃xA; function initScreen（）{alert（“从外部脚本发出警报”）; }＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

我想要的是将“externalScript”加载到其他一些html文件“parent”。 HTML”。首先，我尝试了这个：

＆＃xA;＆＃xA;

  function loadScreen（）{＆＃xA; var xhr = new XMLHttpRequest（）;＆＃xA; xhr.open（'GET'，“external.html”，true）;＆＃xA; //省略了不重要的细节＆＃xA; //解析响应，以便我可以提取脚本并忽略div。＆＃xA; var doc = new DOMParser（）。parseFromString（this.responseText，'text / html'）;＆＃xA; var extScript = doc.getElementById（“externalScript”）;＆＃xA; var extContainer = document.getElementById（'extContainer'）;＆＃xA; //将脚本添加到父DOM＆＃xA; screenContainer.appendChild（extScript）;＆＃XA; };＆＃XA; xhr.send（）;＆＃XA; }＆＃xA;

＆＃xA;＆＃xA;

此方法在父DOM中插入脚本元素，但不执行脚本。我发现通过这样做：

＆＃xA;＆＃xA;

  ...＆＃xA; //创建脚本的副本＆＃xA; var scr2 = document.createElement （“script”）;＆＃xA; scr2.type =“text / javascript”;＆＃xA; scr2.text = extScript.text;＆＃xA; //将脚本添加到父DOM＆＃xA; screenContainer.appendChild （scr2）;＆＃xA; ...＆＃xA;

＆＃xA;＆＃xA;

脚本正确执行，我可以调用“initScreen（）”函数。任何人都可以向我解释这里发生了什么？谢谢。

＆＃xA;

Answer 1

只有半受过教育的答案，但我认为这与document的{{1}}部分有关。它并不常见，但网页中可能包含多个文档 - 例如document.createElement，iframe甚至svg文档。但是，您不能只是在这些文档之间自由复制节点;他们有自己的命名空间和附加行为。因此，正如您在修复程序中发现的那样，您需要在页面文档中创建匹配的MathML，而不是使用外部<script>中的节点。

从外部.html文件动态复制<script>元素

1 个答案: