为动态加载的 innerHTML 上下文运行自定义 javascript

Posted 2023-05-07

【中文标题】为动态加载的 innerHTML 上下文运行自定义 javascript

【英文标题】：Run custom javascript from dynamicaly loaded innerHTML context

【发布时间】：2017-06-03 00:25:45

【问题描述】：

我有一个 html 文档

...

<div id="test"></div>

...

然后我将一些上下文动态加载到#test div。

function change()

ws = document.getElementById(id);
str = '<script>function ttest()window.alert("Yahoo!!!")</script><select><option onclick="ttest();">1</option><option >2</option></select>';
ws.innerHTML = str;


window.onload = change();

页面加载时自定义脚本

<script>function ttest()window.alert("Yahoo!!!")</script>

不起作用。

当它放置静态而没有任何内部HTML时，它可以完美运行。 当它不是自定义函数时，它也可以工作。

当我的自定义函数使用innerHTML 或/和AJAX+innerHTML 动态加载时，我怎样才能使其正常工作？

【问题讨论】：

“不起作用”是什么意思？你想做什么？

我收到了一个消息说功能更改不存在。

但是你为什么要包含这样的javascript代码呢？

实际上我的代码有点复杂)))。这只是提出一个问题并找到有关如何运行动态加载的自定义 javascript 的解决方案。我不怕分享，但文字太多....

尝试写 str = 'function ttest()window.alert("Yahoo!!!")' + 'ipt>';跨度>

【参考方案1】：

通过createElement 将您的脚本添加到document.head。所以是这样的：

var script = document.createElement("script");
script.innerHTML = "function ttest()  alert('Yahoo'); ";
document.head.appendChild(script)

【讨论】：

谢谢，它的工作原理......！！！！但是有一个更正 - document.getElementsByTagName('head') 而不是 document.head.