我尝试在<div>上使用innerHTML加载一些脚本到页面中。脚本似乎加载到DOM中，但它从未执行(至少在Firefox和Chrome中)。有一种方法让脚本执行时插入他们与innerHTML?
示例代码:
<！DOCTYPE html > < html > <身体onload = " . getelementbyid(机)。innerHTML = '<script>alert(\'hi\')<\/script>'"> 难道不应该出现“hi”的提醒吗? < div id = "装载机" > < / div > 身体< / > < / html >
当前回答
你可以这样做:
var mydiv = document.getElementById("mydiv");
var content = "<script>alert(\"hi\");<\/script>";
mydiv.innerHTML = content;
var scripts = mydiv.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
eval(scripts[i].innerText);
}
其他回答
这里有一个非常有趣的解决方案: http://24ways.org/2005/have-your-dom-and-script-it-too
所以使用this代替script标签:
<img src="empty.gif" onload="alert('test');this. parentnode . removechild (this);"/>
是的，你可以，但你必须在DOM之外做，而且顺序必须是正确的。
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
n.innerHTML = scr;
document.body.appendChild(n);
}
.．.将提醒'foo'。这行不通:
document.getElementById("myDiv").innerHTML = scr;
即使这样也不行，因为先插入节点:
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
document.body.appendChild(n);
n.innerHTML = scr;
}
过滤脚本标记，并使用eval运行每个标记
var tmp= document.createElement('div');
tmp.innerHTML = '<script>alert("hello")></script>';
[...tmp.children].filter(x => x.nodeName === 'SCRIPT').forEach(x => eval(x.innerText));
我使用了这个代码，它工作得很好
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不是必需的，但它工作得更好。这对我很管用。
