javascript - 动态插入的 <script> 标签是否有效?

标签 javascript html dom-events

我有一些代码,其中 <script type="text/javascript"> block 是动态插入的。

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

但是,它不起作用,当我尝试单击该按钮时,Firebug 说该函数未定义。

这是可以预料到的吗?如果可以,是否有解决方法?

最佳答案

如果您将其写入 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>

编辑

鉴于有关 defer 属性不正确的信息,我被否决了显然,我觉得有必要从 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 ]

关于javascript - 动态插入的 &lt;script&gt; 标签是否有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1891947/

相关文章:

javascript - 转义保存在 cookie 中的字符串中的撇号

ios - 如何克服移动 Safari 中奇怪的 "placeholder"问题

javascript - 在链接下显示下拉菜单

javascript - 在 JavaScript 中,如果在 HTML 元素及其祖先上声明事件触发器,哪个先触发?

java - 使用 Selenium 三次点击

javascript - 在页面之间导航时显示加载程序 - PWA

javascript - React-Redux,类型错误 : addItem is not a function

javascript - 从 NodeJS 发送数据而不重新渲染整个页面?

html - 在同一个元素上延迟和不延迟?

javascript - HTML 上的 iFrame 的 OnChange 事件与 Onload 事件