Question

我有以下代码：

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

其中js文件位于＆＃39; https://www.somewebsite.com/test.js＆＃39;具有以下内容：

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表示如果节点已经是附加到的节点的子节点，则首先从父节点中删除子节点，然后附加节点。这是有道理的。

附加脚本元素来执行代码

1 个答案: