我尝试在<div>上使用innerHTML加载一些脚本到页面中。脚本似乎加载到DOM中，但它从未执行(至少在Firefox和Chrome中)。有一种方法让脚本执行时插入他们与innerHTML?
示例代码:
<！DOCTYPE html > < html > <身体onload = " . getelementbyid(机)。innerHTML = '<script>alert(\'hi\')<\/script>'"> 难道不应该出现“hi”的提醒吗? < div id = "装载机" > < / div > 身体< / > < / html >
当前回答
你也可以像这样包装你的<脚本>，它将被执行:
<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';
请注意:srcdoc中的作用域指向iframe，因此您必须像上面的示例一样使用top来访问父文档。
其他回答
过滤脚本标记，并使用eval运行每个标记
var tmp= document.createElement('div');
tmp.innerHTML = '<script>alert("hello")></script>';
[...tmp.children].filter(x => x.nodeName === 'SCRIPT').forEach(x => eval(x.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);"/>
简单，没有eval，没有函数:
fetch('/somepage')
.then(x=>x.text())
.then(x=>{
divDestination.innerHTML=x;
divDestination.querySelectorAll("script")
.forEach(x=>{
var sc=document.createElement("script");
sc.appendChild(document.createTextNode(x.innerText));
divDestination.appendChild(sc)
})
})
使用$(parent).html(code)代替parent。innerHTML = code。
下面还修复了使用document的脚本。通过SRC属性写入和加载脚本。不幸的是，即使这并不工作与谷歌AdSense脚本。
var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
document.write = function(code) {
$(parent).append(code);
}
document.writeln = function(code) {
document.write(code + "<br/>");
}
$(parent).html(html);
} finally {
$(window).load(function() {
document.write = oldDocumentWrite
document.writeln = oldDocumentWriteln
})
}
源
下面是一个更现代(和简洁)的mmm解决方案:
function executeScriptElements(containerElement) {
const scriptElements = containerElement.querySelectorAll("script");
Array.from(scriptElements).forEach((scriptElement) => {
const clonedElement = document.createElement("script");
Array.from(scriptElement.attributes).forEach((attribute) => {
clonedElement.setAttribute(attribute.name, attribute.value);
});
clonedElement.text = scriptElement.text;
scriptElement.parentNode.replaceChild(clonedElement, scriptElement);
});
}
注意:我还尝试过使用cloneNode()或outerHTML的替代解决方案，但没有成功。
