动态插入的 <script> 标签是不是有效？
Posted
技术标签:
【中文标题】动态插入的 <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 显示 【参考方案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 方法。谢谢。以上是关于动态插入的 <script> 标签是不是有效？的主要内容，如果未能解决你的问题，请参考以下文章
ueditor里插入的script，style等标签被过滤掉怎么解决
您是不是需要在 <script> 标签中指定文本/javascript？
<script> 标签是不是受到与 javascript/fetch 调用相同的 CORS 限制？
通过 <script> 标签加载到网页中的 JavaScript 文件的源代码是不是可以被该页面中的其他 JavaScript 读取？