javascript - 附加脚本元素来执行代码

Question

我有以下代码:

(function() {
    var myScript = document.createElement('script');
    myScript.src = 'https://www.somewebsite.com/test.js';
    setTimeout(function(){document.head.appendChild(myScript)}, 2000);
})() 

其中js文件在' https://www.somewebsite.com/test.js ' 包含以下内容:

alert('hello');

如果我打开开发者控制台，并将代码粘贴到顶部，一切都会完美运行。大约 2 秒后，我收到一条警告消息，内容是“你好”。

但是，当我粘贴以下代码时:

(function() {
    var myScript = document.createElement('script');
    myScript.src = 'https://www.somewebsite.com/test.js';
    setTimeout(function(){document.head.appendChild(myScript)}, 2000);
    setTimeout(function(){document.head.appendChild(myScript)}, 4000);
})() 

我只收到 1 条警报消息，没有收到第二条。

问题:有人知道这是为什么吗？我认为再次附加脚本会导致我所在的网站再次执行代码，但事实并非如此。

我知道还有其他方法可以做到这一点，但是我有兴趣知道在这种特定情况下发生了什么。

Answer 1

您将同一元素附加两次。附加脚本后查看“元素”面板。该脚本是否有一两个实例？我的猜测是，虽然您调用 appendChild() 两次，但第二次调用什么也不做。如果您尝试将相同的 p 标记两次附加到正文中，您会得到相同的行为。

无需外部脚本即可尝试此操作的代码:

(function() {
    var myScript = document.createElement('script');
    myScript.text = "alert('hello');";
    setTimeout(function(){document.head.appendChild(myScript)}, 2000);
    setTimeout(function(){document.head.appendChild(myScript)}, 4000);
})();

更新:

实际上，spec表示如果该节点已经是要附加到的节点的子节点，则首先从父节点中删除该子节点，然后再附加。这是有道理的。