我尝试在<div>上使用innerHTML加载一些脚本到页面中。脚本似乎加载到DOM中，但它从未执行(至少在Firefox和Chrome中)。有一种方法让脚本执行时插入他们与innerHTML?
示例代码:
<！DOCTYPE html > < html > <身体onload = " . getelementbyid(机)。innerHTML = '<script>alert(\'hi\')<\/script>'"> 难道不应该出现“hi”的提醒吗? < div id = "装载机" > < / div > 身体< / > < / html >
当前回答
Krasimir Tsonev有一个伟大的解决方案，可以克服所有的问题。 他的方法不需要使用eval，因此不存在性能和安全问题。 它允许你用js设置innerHTML字符串包含html，并立即将其转换为DOM元素，同时还执行代码中存在的js部分。简短，简单，完全按你想要的工作。
享受他的解决方案吧:
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
重要提示:
您需要用div标签包装目标元素 你需要用div标签包装src字符串。 如果你直接写src字符串，它包括js部分，请注意正确地写结束脚本标记(在/之前有\)，因为这是一个字符串。
其他回答
Krasimir Tsonev有一个伟大的解决方案，可以克服所有的问题。 他的方法不需要使用eval，因此不存在性能和安全问题。 它允许你用js设置innerHTML字符串包含html，并立即将其转换为DOM元素，同时还执行代码中存在的js部分。简短，简单，完全按你想要的工作。
享受他的解决方案吧:
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
重要提示:
您需要用div标签包装目标元素 你需要用div标签包装src字符串。 如果你直接写src字符串，它包括js部分，请注意正确地写结束脚本标记(在/之前有\)，因为这是一个字符串。
我使用了这个代码，它工作得很好
var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
eval(arr[n].innerHTML)//run script inside div
对我来说，最好的方法是通过innerHtml插入新的HTML内容，然后使用
setTimeout(() => {
var script_el = document.createElement("script")
script_el.src = 'script-to-add.js'
document.body.appendChild(script_el)
}, 500)
setTimeout不是必需的，但它工作得更好。这对我很管用。
根据Danny '365CSI' Engelman的评论，这里有一个通用的解决方案:
<script>
alert("This script always runs.");
script01 = true;
</script>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
onload="if(typeof script01==='undefined') eval(this.previousElementSibling.innerHTML)">
使用它作为innerHTML(即由XMLHttpRequest加载)或直接(即由PHP后端插入)，脚本总是加载一次。
解释:脚本加载innerHTML不执行，但onload内容属性是。如果脚本没有执行(作为innerHTML添加)，那么脚本将在image onload事件中执行。如果脚本已加载(由后端添加)，则定义script01变量，onload将不会第二次运行脚本。
下面是一个递归函数来设置一个元素的innerHTML，我在我们的广告服务器中使用:
// o: container to set the innerHTML
// html: html text to set.
// clear: if true, the container is cleared first (children removed)
function setHTML(o, html, clear) {
if (clear) o.innerHTML = "";
// Generate a parseable object with the html:
var dv = document.createElement("div");
dv.innerHTML = html;
// Handle edge case where innerHTML contains no tags, just text:
if (dv.children.length===0){ o.innerHTML = html; return; }
for (var i = 0; i < dv.children.length; i++) {
var c = dv.children[i];
// n: new node with the same type as c
var n = document.createElement(c.nodeName);
// copy all attributes from c to n
for (var j = 0; j < c.attributes.length; j++)
n.setAttribute(c.attributes[j].nodeName, c.attributes[j].nodeValue);
// If current node is a leaf, just copy the appropriate property (text or innerHTML)
if (c.children.length == 0)
{
switch (c.nodeName)
{
case "SCRIPT":
if (c.text) n.text = c.text;
break;
default:
if (c.innerHTML) n.innerHTML = c.innerHTML;
break;
}
}
// If current node has sub nodes, call itself recursively:
else setHTML(n, c.innerHTML, false);
o.appendChild(n);
}
}
你可以在这里看到演示。
