我尝试在<div>上使用innerHTML加载一些脚本到页面中。脚本似乎加载到DOM中，但它从未执行(至少在Firefox和Chrome中)。有一种方法让脚本执行时插入他们与innerHTML?
示例代码:
<！DOCTYPE html > < html > <身体onload = " . getelementbyid(机)。innerHTML = '<script>alert(\'hi\')<\/script>'"> 难道不应该出现“hi”的提醒吗? < div id = "装载机" > < / div > 身体< / > < / html >
当前回答
Gabriel Garcia提到的mutationobserver是正确的，但对我来说不太管用。我不确定这是因为浏览器的怪癖还是因为我自己的错误，但最终适合我的版本是:
document.addEventListener("DOMContentLoaded", function(event) {
var observer = new MutationObserver(mutations=>{
mutations.map(mutation=>{
Array.from(mutation.addedNodes).map(node=>{
if (node.tagName === "SCRIPT") {
var s = document.createElement("script");
s.text=node.text;
if (typeof(node.parentElement.added) === 'undefined')
node.parentElement.added = [];
node.parentElement.added[node.parentElement.added.length] = s;
node.parentElement.removeChild(node);
document.head.appendChild(s);
}
})
})
})
observer.observe(document.getElementById("element_to_watch"), {childList: true, subtree: true,attributes: false});
};
当然，您应该将element_to_watch替换为要修改的元素的名称。
node.parentElement.added用于存储添加到document.head的脚本标记。在用于加载外部页面的函数中，您可以使用如下内容删除不再相关的脚本标记:
function freeScripts(node){
if (node === null)
return;
if (typeof(node.added) === 'object') {
for (var script in node.added) {
document.head.removeChild(node.added[script]);
}
node.added = {};
}
for (var child in node.children) {
freeScripts(node.children[child]);
}
}
这是一个load函数开始的例子:
function load(url, id, replace) {
if (document.getElementById(id) === null) {
console.error("Element of ID "+id + " does not exist!");
return;
}
freeScripts(document.getElementById(id));
var xhttp = new XMLHttpRequest();
// proceed to load in the page and modify innerHTML
}
其他回答
您可以创建脚本，然后注入内容。
var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);
这适用于所有浏览器:)
下面是一个更现代(和简洁)的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的替代解决方案，但没有成功。
单线解决方案如下:
document.getElementsByTagName("head")[0].append(document.createRange().createContextualFragment('<script src="https://google.com/file.js"></script>'));
从innerHTML执行(Java Script)标签
将脚本元素替换为具有class="javascript"类属性的div，并以</div>关闭
不要改变你想要执行的内容(以前是在script标签，现在是在div标签)
在你的页面中添加一个样式…
<style type="text/css"> .javascript {display: none;} > < /风格
现在使用jquery运行eval (jquery js应该已经包含在内)
$('.javascript').each(function() {
eval($(this).text());
});`
你可以在我的博客上探索更多。
你也可以像这样包装你的<脚本>，它将被执行:
<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';
请注意:srcdoc中的作用域指向iframe，因此您必须像上面的示例一样使用top来访问父文档。
