Question

此点击事件有效：

document.getElementById('control').addEventListener('click', function(){

   alert('test');

});

为什么我不能将其作为页面上已存在的脚本标记的内容？

var s = document.getElementsByTagName("script")[0];
s.innerHTML = "document.getElementById('control').addEventListener('click', function(){alert('test');});";

我已经尝试了在IIFE中做某事的尝试：

s.innerHTML = "(function(){alert('test')}());";

这样它就会自行调用。

此外：

s.innerHTML = "var f = function(){alert('f')}; f();"

我只是理论上感兴趣，绝不是说这是一个好主意或坏主意，但我怎么能让它发挥作用呢？

Answer 1

如果更改了内容，脚本标记将被评估一次并且代码不会被替换（在这方面，它们的工作方式与其他类型的标记不同）。如果要向页面添加新代码，只需将新脚本标记添加到包含新代码的页面即可。如果要重新定义现有的可公开访问的函数，只需使用新代码重新定义它们即可。

因此，如果您想要替换先前的function f()定义，您可以简单地为该符号分配新代码：

f = function() {alert("new f");}

您可以随时使用以下代码段插入来自远程源的新脚本：

var s = document.createElement("script");
s.type = "text/javascript";
s.src = url;
document.getElementsByTagName("head")[0].appendChild(s);

也可以使用eval()将文本传递给您希望它解析然后运行的javascript引擎，但是很少有任何理由这样做，因为通常有更好的方法来解决这样的问题。

Answer 2

除了jfriend00所说的。如果要动态执行脚本。使用应该使用JavaScript的eval函数。

注意：但要小心使用!!!

Answer 3

你不能用现有的脚本标签来做这件事，你必须创建一个新的脚本标签并在将脚本添加到DOM之前推送它：

var sc =document.createElement("script");
sc.type="text/javascript";
var scriptText=document.createTextNode("document.getElementById('control').addEventListener('click', function(){"+
        "alert('test');" +
    "});");
sc.appendChild(scriptText);
document.querySelector("head").appendChild(sc);

它会做你想要的。

重要的一点是，一旦脚本标签中的第一个脚本被执行，你就不再能在其中注入任何脚本了，实际上你可以，但它不会起作用。

使用JavaScript动态更新脚本标记的内容

3 个答案: