动态插入的 <script> 标签是否有效？答案

【问题标题】：Are dynamically inserted <script> tags meant to work?动态插入的 <script> 标签是否有效？
【发布时间】：2010-12-25 21:42:18
【问题描述】：

我有一些代码在其中动态插入了 <script type="text/javascript"> 块。

这个块包含一个函数，它上面有一个<input type="button"> 元素（也是动态插入的）用onclick 属性调用它。

但是，它不起作用，并且当我尝试单击按钮时，Firebug 说该功能未定义。

这是否可以预期，如果可以，是否有解决方法？

【问题讨论】：

是的，如果你做对了，那应该可以。发布代码，我们会通知您...
您是否查看了页面源代码并验证了该功能是否已按预期插入？
这取决于你对“动态插入”的定义。请定义这个。
@Crescent Fresh：他的意思对我来说相当明显——你可以定义多少种不同的方式动态插入？
Firebug 显示

标签： javascript html javascript-events

【解决方案1】：

如果你使用类似的东西

document.getElementById('foo').innerHTML = blah

然后不行，它不会工作。

一个简单的解决方法是使用jQuery 进行插入，这将执行该块中的脚本。只需在元素上使用 html 函数，将您的 HTML/脚本块传递给它。

【讨论】：

只有我不特别喜欢得到像“使用 xxx 库”这样的答案吗？如果他只写了 5 行代码，真的值得浏览器下载并解析一个库来执行一个简单的功能吗？
我实际上是一个 jQuery 用户，但是对于这个特定的实例我不想使用库
和我一样，只是在许多情况下不需要跨浏览器兼容性（内部网、桌面小部件等），虽然库仍然可以让事情变得更容易，但它们有时可能会有点矫枉过正.我确实想知道是否有些人知道图书馆之外的 javascript...
AndyE，我实际上同意你的观点——让别人告诉你“使用图书馆”通常不是很有帮助。然而，在这个特定的答案中，我纯粹是根据经验说话，而 jQuery 是我用来解决问题的工具；老实说，我不知道基于 DOM 的替代方案有效。当时没有答案，所以我认为使用 jQuery 总比没有好。
别介意我，那是凌晨 2 点，我的脾气暴躁 :-) 我记得，当我还在写我的时候，你就得到了答案，我同意，答案就是答案归根结底，jQuery 始终是大多数开发人员的合适选择。

【解决方案2】：

动态插入客户端还是服务器端？

服务器端它会工作 - 假设服务器端调用不是 AJAX 回发（因为实际上实际的动态插入仍然是客户端）。

客户端不会（您不能简单地将 java-script 在页面加载后注入页面并期望它执行）。在这种情况下，您必须真正显式地执行 JavaScript，或者使用像 jQuery 这样的框架来为您执行此操作。

【讨论】：

【解决方案3】：

如果你把它写到一个 innerHTML 属性，it won't work 除了在 IE 中出现 DEFER 属性时：

scriptParentNode.innerHTML = '<span/><script defer="defer" type="text/javascript">blah();</script>';

您的选择是，a) 使用 DOM 创建元素并附加它：

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

或 b) 在解析 HTML 时使用 document.write（但不是之后！）

<head>
  <script type="text/javascript">
    document.write('<script type="text/javascript">blah();</script>');
  </script>
</head>

编辑

看到我因延迟属性不正确的信息而被否决显然，我觉得有必要从MSDN documentation 发布一个工作示例。虽然 IE 确实会从 innerHTML 字符串的开头删除 NoScope 元素，但可以通过在 HTML 字符串的开头添加一个作用域元素来解决这个问题（上面更新的示例）：

<HTML>
<SCRIPT>
function insertScript(){
    var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
    var sScript="<SCRIPT DEFER>";
    sScript = sScript + "function go2(){ alert('Hello from inserted script.') }";
    sScript = sScript + "</SCRIPT" + ">";
    ScriptDiv.innerHTML = sHTML + sScript;
}    
</SCRIPT>
<BODY onload="insertScript();">
    <DIV ID="ScriptDiv"></DIV>
</BODY>
</HTML>

请随意单击 MSDN 文档中的“显示”按钮以获取工作示例。 [link]

【讨论】：

我正在使用 DOM 方法。谢谢。