执行用. innerHTML 插入的 < script > 元素

我有一个脚本，它使用 innerHTML将一些内容插入到一个元素中。

例如，内容可以是:

<script type="text/javascript">alert('test');</script>
<strong>test</strong>

问题是 <script>标记中的代码没有被执行。 我谷歌了一下，但没有明显的解决办法。如果我使用 jQuery$(element).append(content);插入内容，那么脚本部分在被注入 DOM 之前就会得到 eval。

有人有执行所有 <script>元素的代码片段吗？JQuery 代码有点复杂，所以我不能真正弄清楚它是如何完成的。

编辑 :

通过窥视 jQuery 代码，我已经设法弄清楚 jQuery 是如何做到这一点的，这导致了下面的代码:

Demo:
<div id="element"></div>


<script type="text/javascript">
function insertAndExecute(id, text)
{
domelement = document.getElementById(id);
domelement.innerHTML = text;
var scripts = [];


ret = domelement.childNodes;
for ( var i = 0; ret[i]; i++ ) {
if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
}
}


for(script in scripts)
{
evalScript(scripts[script]);
}
}
function nodeName( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
}
function evalScript( elem ) {
data = ( elem.text || elem.textContent || elem.innerHTML || "" );


var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
script.type = "text/javascript";
script.appendChild( document.createTextNode( data ) );
head.insertBefore( script, head.firstChild );
head.removeChild( script );


if ( elem.parentNode ) {
elem.parentNode.removeChild( elem );
}
}


insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>
195468 次浏览
小开

您可以看一下 这篇文章。代码可能是这样的:

var actualDivToBeUpdated = document.getElementById('test');
var div = document.createElement('div');
div.innerHTML = '<script type="text/javascript">alert("test");<\/script>';
var children = div.childNodes;
actualDivToBeUpdated.innerHTML = '';
for(var i = 0; i < children.length; i++) {
actualDivToBeUpdated.appendChild(children[i]);
}
小开

您不应该使用 innerHTML 属性，而应该使用 Node: 文档树[ HTML DOM ]中的节点的阑尾 Child 方法。通过这种方式，您可以稍后调用您注入的代码。

确保你明白 node.innerHTML 是不一样的 node.appendChild。您可能需要花一些时间在 Javascript 客户端参考上了解更多细节和 DOM。希望以下内容能对你有所帮助。

注射样本的工作原理:

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function doOnLoad() {
addScript('inject',"function foo(){ alert('injected'); }");
}
    

function addScript(inject,code) {
var _in = document.getElementById('inject');
var scriptNode = document.createElement('script');
scriptNode.innerHTML = code;
_in.appendChild(scriptNode);
}
</script>
</head>
<body onload="doOnLoad();">
<div id="header">some content</div>
<div id="inject"></div>
<input type="button" onclick="foo(); return false;" value="Test Injected" />
</body>
</html>

小开

试试这个片段:

function stripAndExecuteScript(text) {
var scripts = '';
var cleaned = text.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
scripts += arguments[1] + '\n';
return '';
});


if (window.execScript){
window.execScript(scripts);
} else {
var head = document.getElementsByTagName('head')[0];
var scriptElement = document.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.innerText = scripts;
head.appendChild(scriptElement);
head.removeChild(scriptElement);
}
return cleaned;
};




var scriptString = '<scrip' + 't + type="text/javascript">alert(\'test\');</scr' + 'ipt><strong>test</strong>';
document.getElementById('element').innerHTML = stripAndExecuteScript(scriptString);
小开
最佳答案

OP 的脚本在 IE7中不起作用。在 SO 的帮助下，这里有一个脚本可以起作用:

exec_body_scripts: function(body_el) {
// Finds and executes scripts in a newly added element's body.
// Needed since innerHTML does not run scripts.
//
// Argument body_el is an element in the dom.


function nodeName(elem, name) {
return elem.nodeName && elem.nodeName.toUpperCase() ===
name.toUpperCase();
};


function evalScript(elem) {
var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
head = document.getElementsByTagName("head")[0] ||
document.documentElement,
script = document.createElement("script");


script.type = "text/javascript";
try {
// doesn't work on ie...
script.appendChild(document.createTextNode(data));
} catch(e) {
// IE has funky script nodes
script.text = data;
}


head.insertBefore(script, head.firstChild);
head.removeChild(script);
};


// main section of function
var scripts = [],
script,
children_nodes = body_el.childNodes,
child,
i;


for (i = 0; children_nodes[i]; i++) {
child = children_nodes[i];
if (nodeName(child, "script" ) &&
(!child.type || child.type.toLowerCase() === "text/javascript")) {
scripts.push(child);
}
}


for (i = 0; scripts[i]; i++) {
script = scripts[i];
if (script.parentNode) {script.parentNode.removeChild(script);}
evalScript(scripts[i]);
}
};
小开

这里有一个非常有趣的方法来解决你的问题: Http://24ways.org/2005/have-your-dom-and-script-it-too

所以它看起来应该是这样的:

<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
小开

scriptNode.innerHTML = code对 IE 不起作用。唯一要做的就是用 scriptNode.text = code代替，它工作得很好

小开 
function insertHtml(id, html)
{
var ele = document.getElementById(id);
ele.innerHTML = html;
var codes = ele.getElementsByTagName("script");
for(var i=0;i<codes.length;i++)
{
eval(codes[i].text);
}
}

在我的项目中，它可以在 Chrome 中工作

小开

感谢 Larry 的脚本，它在 IE10中运行得非常好，下面是我使用的:

$('#' + id)[0].innerHTML = result;
$('#' + id + " script").each(function() { this.text = this.text || $(this).text();} );
小开

使用 jquery $(parent).html(code)比使用 parent.innerHTML = code更容易:

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
})
}

这也适用于使用 document.write的脚本和通过 src属性加载的脚本。不幸的是，即使这样也不能用于 Google AdSense 脚本。

小开

尝试使用 function eval ()。

data.newScript = '<script type="text/javascript">//my script...</script>'
var element = document.getElementById('elementToRefresh');
element.innerHTML = data.newScript;
eval(element.firstChild.innerHTML);

这是一个真实的例子，从一个项目，我正在开发。 多亏了这篇文章

小开

我让它递归地搜索整个块和子节点。
脚本现在还将调用用 src 参数指定的外部脚本。 脚本被附加到头部，而不是插入并按照找到脚本的顺序放置。因此，特别是订单脚本被保留。每个脚本的执行方式与浏览器处理初始 DOM 加载的方式类似。因此，如果您有一个从 CDN 调用 jQuery 的脚本块，并且下一个脚本节点使用 jQuery... ... 没问题！我根据您在 tag 参数中设置的内容，用序列化的 id 对附加的脚本进行了标记，这样您就可以找到这个脚本添加的内容。

exec_body_scripts: function(body_el, tag) {
// Finds and executes scripts in a newly added element's body.
// Needed since innerHTML does not run scripts.
//
// Argument body_el is an element in the dom.


function nodeName(elem, name) {
return elem.nodeName && elem.nodeName.toUpperCase() ===
name.toUpperCase();
};


function evalScript(elem, id, callback) {
var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
head = document.getElementsByTagName("head")[0] ||
document.documentElement;


var script = document.createElement("script");
script.type = "text/javascript";
if (id != '') {
script.setAttribute('id', id);
}


if (elem.src != '') {
script.src = elem.src;
head.appendChild(script);
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
} else {
try {
// doesn't work on ie...
script.appendChild(document.createTextNode(data));
} catch(e) {
// IE has funky script nodes
script.text = data;
}
head.appendChild(script);
callback();
}
};


function walk_children(node) {
var scripts = [],
script,
children_nodes = node.childNodes,
child,
i;


if (children_nodes === undefined) return;


for (i = 0; i<children_nodes.length; i++) {
child = children_nodes[i];
if (nodeName(child, "script" ) &&
(!child.type || child.type.toLowerCase() === "text/javascript")) {
scripts.push(child);
} else {
var new_scripts = walk_children(child);
for(j=0; j<new_scripts.length; j++) {
scripts.push(new_scripts[j]);
}
}
}


return scripts;
}


var i = 0;
function execute_script(i) {
script = scripts[i];
if (script.parentNode) {script.parentNode.removeChild(script);}
evalScript(scripts[i], tag+"_"+i, function() {
if (i < scripts.length-1) {
execute_script(++i);
}
});
}


// main section of function
if (tag === undefined) tag = 'tmp';


var scripts = walk_children(body_el);


execute_script(i);
}
小开

只要做:

document.body.innerHTML = document.body.innerHTML + '<img src="../images/loaded.gif" alt="" onload="alert(\'test\');this.parentNode.removeChild(this);" />';
小开

下面是一个更短、更有效的脚本，它也适用于具有 src属性的脚本:

function insertAndExecute(id, text) {
document.getElementById(id).innerHTML = text;
var scripts = Array.prototype.slice.call(document.getElementById(id).getElementsByTagName("script"));
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].src != "") {
var tag = document.createElement("script");
tag.src = scripts[i].src;
document.getElementsByTagName("head")[0].appendChild(tag);
}
else {
eval(scripts[i].innerHTML);
}
}
}

注意: 如果使用不当，eval可能会导致安全漏洞，但是它比动态创建脚本标记更快。

小开

不使用“ eval”的解决方案:

var setInnerHtml = function(elm, html) {
elm.innerHTML = html;
var scripts = elm.getElementsByTagName("script");
// If we don't clone the results then "scripts"
// will actually update live as we insert the new
// tags, and we'll get caught in an endless loop
var scriptsClone = [];
for (var i = 0; i < scripts.length; i++) {
scriptsClone.push(scripts[i]);
}
for (var i = 0; i < scriptsClone.length; i++) {
var currentScript = scriptsClone[i];
var s = document.createElement("script");
// Copy all the attributes from the original script
for (var j = 0; j < currentScript.attributes.length; j++) {
var a = currentScript.attributes[j];
s.setAttribute(a.name, a.value);
}
s.appendChild(document.createTextNode(currentScript.innerHTML));
currentScript.parentNode.replaceChild(s, currentScript);
}
}

这实际上克隆了 script 标记，然后用新生成的脚本标记替换被阻塞的脚本标记，从而允许执行。

小开

试试这个，它适合我在 Chrome，Safari 和 Firefox 上使用:

var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.body.appendChild(script);
--> logs "hi"

但需要注意的是，下面的 div 嵌套脚本不会运行:

var script = document.createElement('div');
script.innerHTML = '<script>console.log("hi")</script>';
document.body.appendChild(script);
--> doesn't log anything

要运行脚本，必须创建一个节点，然后作为子节点附加。你甚至可以在之前注入的 div 中添加一个脚本，它就会运行(我以前在尝试让广告服务器代码工作时遇到过这种情况) :

var div = document.createElement('div');
div.id = 'test-id';
document.body.appendChild(div);
var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.getElementById('test-id').appendChild(script);
--> logs "hi"
小开

ES6版@joshcomley 的简化答案及示例。

没有 JQuery，没有库，没有 eval，没有 DOM 更改，只有纯 Javascript。

Http://plnkr.co/edit/mmegiu?p=preview

function setInnerHTML(elm, html) {
elm.innerHTML = html;
  

Array.from(elm.querySelectorAll("script"))
.forEach( oldScriptEl => {
const newScriptEl = document.createElement("script");
      

Array.from(oldScriptEl.attributes).forEach( attr => {
newScriptEl.setAttribute(attr.name, attr.value)
});
      

const scriptText = document.createTextNode(oldScriptEl.innerHTML);
newScriptEl.appendChild(scriptText);
      

oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
});
}

用法

$0.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML($0, HTML); // does run <script> tags in HTML
小开

下面是我在最近一个项目中的解决方案。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1 id="hello_world">Sample</h1>
<script type="text/javascript">
var div = document.createElement("div");
var t = document.createElement('template');
t.innerHTML =  "Check Console tab for javascript output: Hello world!!!<br/><script type='text/javascript' >console.log('Hello world!!!');<\/script>";
  

for (var i=0; i < t.content.childNodes.length; i++){
var node = document.importNode(t.content.childNodes[i], true);
div.appendChild(node);
}
document.body.appendChild(div);
</script>
 

</body>
</html>

小开

Expending the answer of 兰德

document.body.innerHTML = '<img src="../images/loaded.gif" alt="" > onload="alert(\'test\');this.parentNode.removeChild(this);" />';

您可以使用 base64映像来创建和加载脚本

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAADUlEQVQYV2P4//8/AwAI/AL+iF8G4AAAAABJRU5ErkJggg=="
onload="var script = document.createElement('script');  script.src = './yourCustomScript.js'; parentElement.append(script);" />

或者，如果你有一个 Iframe，你可以用它来代替

<iframe src='//your-orginal-page.com' style='width:100%;height:100%'
onload="var script = document.createElement('script');  script.src = './your-coustom-script.js'; parentElement.append(script);"
frameborder='0'></iframe>
小开

我需要一些类似的东西，但是需要脚本保留或重新创建在原始脚本的同一位置，因为我的脚本针对 DOM 中 script 标记的位置来创建/目标元素。我还对脚本进行了递归处理，以确保它在多于一级的情况下也能正常工作。

注意: 我在这里使用 const，如果你有一个旧的浏览器，只要使用 var。

    window.exec_body_scripts = function(body_el) {
// ref: https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml based on Larry K's answer
// Finds and executes scripts in a newly added element's body.
// Needed since innerHTML does not run scripts.
//
// Argument body_el is an element in the dom.
const
type__Js = 'text/javascript',
tagName__Script = 'script',
tagName__Script__Upper = tagName__Script.toUpperCase();
var scripts = [], script, i;
function evalScript(elem) {
var parent = elem.parentNode,
data = (elem.text || elem.textContent || elem.innerHTML || ""),
script = document.createElement(tagName__Script);


script.type = type__Js;
try {
// doesn't work on ie...
script.appendChild(document.createTextNode(data));
} catch (e) {
// IE has funky script nodes
script.text = data;
}
// Make sure to re-insert the script at the same position
// to make sure scripts that target their position
// in the DOM function as expected.
var parent = elem.parentNode;
parent.insertBefore(script, elem);
parent.removeChild(elem);
};
// Get all scripts (recursive)
if (typeof (document.querySelectorAll) !== typeof (void 0)) {
document.querySelectorAll('script').forEach((scr) => { if (!scr.type || scr.type.toLowerCase() === type__Js) scripts.push(scr); });
}
else {
var children_nodes = body_el.childNodes, child;
for (i = 0; children_nodes[i]; i++) {
child = children_nodes[i];
if (
child.nodeName
&&
child.nodeName.toUpperCase() === tagName__Script__Upper
&&
(
!child.type
||
child.type.toLowerCase() === type__Js
)
) {
scripts.push(child);
}
// Recursive call
window.exec_body_scripts(child);
}
}
for (i = 0; scripts[i]; i++) {
evalScript(scripts[i]);
}
};
小开

在 TypeScript 中创建了这个新的助手函数，也许有人会喜欢它。如果从脚本参数中删除类型声明，它将只是普通的 JS。

const evalPageScripts = () => {
const scripts = document.querySelectorAll('script');


scripts.forEach((script: HTMLScriptElement) => {
const newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = script.src;


if (script.parentNode) {
script.parentNode.removeChild(script);
}


return document.body.appendChild(newScript);
})
};


export default evalPageScripts;

小开

正常执行脚本元素。InnerHTML 只是不要把“”开始和结束标记放在。Innerhtml 值。看看我的代码，它只是普通的代码没有 jQuery 或任何其他长的 JavaScript 函数

<h2>Click on Run to execute script</h2>
<button type="button" onclick="run()">Run</button>
<script id="my_script"></script>
<script>
document.getElementById("my_script").innerHTML= "function run(){alert('Wow! Script executed :)');}";


</script>

小开

我还有一些需要在加载 javascript 文件后执行 javascript 代码(使用 eval)的页面，所以在 script createelement 上放置了加载事件，这样在加载 javascript 文件时就可以执行。我的网站是一个 MVC SPA 应用程序。它使用 ajax 加载部分页面。使用 innerhtml 设置这些部分页面，然后加载 javascript 文件和该部分页面上的 javascript 代码。

小开

使用 https://stackoverflow.com/a/62641523/3394495的简短而甜蜜的方法:

它首先将 HTML 解析为 DocumentFragement(使用所有现代浏览器都支持的 创建上下文片段，但标记为实验性的) ，然后将其添加到 DOM 中。

这将执行内联脚本。

export function setInnerHTMLAndExecuteScripts(element: HTMLElement, html: string) {
const newContent = document.createRange().createContextualFragment(html);
element.innerHTML = '';
element.append(newContent);
}

提交答案