blocks|key|1277052|text|您必须使用eval()来执行作为DOM文本插入的任何脚本代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1277053|MooTools会自动为你做这件事，我相信jQuery也会这样做的(取决于版本。jQuery版本1.6%2B使用eval)。这省去了很多解析<script>标签和转义内容的麻烦，也省去了一堆其他的“陷阱”。|style|CODE|1277054|通常，如果你打算自己eval()它，你想创建/发送脚本代码没有任何超文本标记语言标记，如<script>，因为这些将不会正确eval()。|1277055|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/jsref_eval.asp^0|5|6|0|0|1I|4|1W|8|0|A|6|18|8|1Q|6|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]|$A|Y|B|Z|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|10|8|@$A|11|B|12|F|G]|$A|13|B|14|F|G]|$A|15|B|16|F|G]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>You have to use <a href="http://www.w3schools.com/jsref/jsref_eval.asp" rel="noreferrer">eval()</a> to execute any script code that you've inserted as DOM text.</p>

<p>MooTools will do this for you automatically, and I'm sure jQuery would as well (depending on the version. jQuery version 1.6+ uses <code>eval</code>).  This saves a lot of hassle of parsing out <code>&lt;script&gt;</code> tags and escaping your content, as well as a bunch of other "gotchas".</p>

<p>Generally if you're going to <code>eval()</code> it yourself, you want to create/send the script code without any HTML markup such as <code>&lt;script&gt;</code>, as these will not <code>eval()</code> properly.</p>


blocks|key|1277210|text|这里有一个非常有趣的问题解决方案：http://24ways.org/2005/have-your-dom-and-script-it-too|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1277211|所以使用下面的代码而不是脚本标记：|1277212|<img+src="empty.gif"+onload="alert('test');this.parentNode.removeChild(this);"+/>|style|CODE|1277213|entityMap|0|LINK|mutability|MUTABLE|url|http://24ways.org/2005/have-your-dom-and-script-it-too^0|H|1I|0|0|0|0|29|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@$A|X|B|Y|H|I]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>Here is a very interesting solution to your problem:
<a href="http://24ways.org/2005/have-your-dom-and-script-it-too" rel="noreferrer">http://24ways.org/2005/have-your-dom-and-script-it-too</a></p>

<p>So use this instead of script tags:</p>

<p><code>&lt;img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" /&gt;</code></p>


blocks|key|1492175|text|我使用了这段代码，它工作得很好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1492176|var+arr+=+MyDiv.getElementsByTagName('script')
for+(var+n+=+0;+n+<+arr.length;+n%2B%2B)
++++eval(arr[n].innerHTML)//run+script+inside+div|code-block|syntax|javascript|1492177|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I used this code, it is working fine</p>

<pre><code>var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n &lt; arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div
</code></pre>


blocks|key|1492337|text|对于任何仍在尝试这样做的人来说，不，您不能使用innerHTML注入脚本，但是可以使用Blob和URL.createObjectURL将字符串加载到脚本标记中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1492338|我已经创建了一个示例，它允许您将字符串作为脚本运行，并通过promise返回脚本的“exports”：|1492339|function+loadScript(scriptContent,+moduleId)+{
++++//+create+the+script+tag
++++var+scriptElement+=+document.createElement('SCRIPT');

++++//+create+a+promise+which+will+resolve+to+the+script's+'exports'
++++//+(i.e.,+the+value+returned+by+the+script)
++++var+promise+=+new+Promise(function(resolve)+{
++++++++scriptElement.onload+=+function()+{
++++++++++++var+exports+=+window["__loadScript_exports_"+%2B+moduleId];
++++++++++++delete+window["__loadScript_exports_"+%2B+moduleId];
++++++++++++resolve(exports);
++++++++}
++++});

++++//+wrap+the+script+contents+to+expose+exports+through+a+special+property
++++//+the+promise+will+access+the+exports+this+way
++++var+wrappedScriptContent+=
++++++++"(function()+{+window['__loadScript_exports_"+%2B+moduleId+%2B+"']+=+"+%2B+
++++++++scriptContent+%2B+"})()";

++++//+create+a+blob+from+the+wrapped+script+content
++++var+scriptBlob+=+new+Blob([wrappedScriptContent],+{type:+'text/javascript'});

++++//+set+the+id+attribute
++++scriptElement.id+=+"__loadScript_module_"+%2B+moduleId;

++++//+set+the+src+attribute+to+the+blob's+object+url+
++++//+(this+is+the+part+that+makes+it+work)
++++scriptElement.src+=+URL.createObjectURL(scriptBlob);

++++//+append+the+script+element
++++document.body.appendChild(scriptElement);

++++//+return+the+promise,+which+will+resolve+to+the+script's+exports
++++return+promise;
}

...

function+doTheThing()+{
++++//+no+evals
++++loadScript('5+%2B+5').then(function(exports)+{
+++++++++//+should+log+10
++++++++console.log(exports)
++++});
}|code-block|syntax|javascript|1492340|我已经从我的实际实现中简化了这一点，所以不能保证其中没有任何bug。但这个原则是可行的。|1492341|如果您不关心在脚本运行后获得任何值，那么就更简单了；只需省略Promise和onload部分即可。您甚至不需要包装脚本或创建全局window.__load_script_exports_属性。|1492342|entityMap^0|N|9|17|4|1C|J|0|0|0|0|U|7|12|6|1S|T|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|R|$]]

<p>For anyone still trying to do this, no, you can't inject a script using <code>innerHTML</code>, but it is possible to load a string into a script tag using a <code>Blob</code> and <code>URL.createObjectURL</code>.</p>

<p>I've created an example that lets you run a string as a script and get the 'exports' of the script returned through a promise:</p>

<pre><code>function loadScript(scriptContent, moduleId) {
    // create the script tag
    var scriptElement = document.createElement('SCRIPT');

    // create a promise which will resolve to the script's 'exports'
    // (i.e., the value returned by the script)
    var promise = new Promise(function(resolve) {
        scriptElement.onload = function() {
            var exports = window["__loadScript_exports_" + moduleId];
            delete window["__loadScript_exports_" + moduleId];
            resolve(exports);
        }
    });

    // wrap the script contents to expose exports through a special property
    // the promise will access the exports this way
    var wrappedScriptContent =
        "(function() { window['__loadScript_exports_" + moduleId + "'] = " + 
        scriptContent + "})()";

    // create a blob from the wrapped script content
    var scriptBlob = new Blob([wrappedScriptContent], {type: 'text/javascript'});

    // set the id attribute
    scriptElement.id = "__loadScript_module_" + moduleId;

    // set the src attribute to the blob's object url 
    // (this is the part that makes it work)
    scriptElement.src = URL.createObjectURL(scriptBlob);

    // append the script element
    document.body.appendChild(scriptElement);

    // return the promise, which will resolve to the script's exports
    return promise;
}

...

function doTheThing() {
    // no evals
    loadScript('5 + 5').then(function(exports) {
         // should log 10
        console.log(exports)
    });
}
</code></pre>

<p>I've simplified this from my actual implementation, so no promises that there aren't any bugs in it. But the principle works.</p>

<p>If you don't care about getting any value back after the script runs, it's even easier; just leave out the <code>Promise</code> and <code>onload</code> bits. You don't even need to wrap the script or create the global <code>window.__load_script_exports_</code> property.</p>


blocks|key|1277546|text|下面是一个递归函数，用于设置我在广告服务器中使用的元素的innerHTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277547|//+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%2B%2B)+{
++++++++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%2B%2B)
++++++++++++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);
++++}
}|code-block|syntax|javascript|1277548|您可以查看演示here。|offset|length|1277549|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbin.com/xuxejiveru^0|0|0|7|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Here is a recursive function to set the innerHTML of an element that I use in our ad server:</p>

<pre><code>// 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 &lt; 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 &lt; 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);
    }
}
</code></pre>

<p>You can see the demo <a href="https://jsbin.com/xuxejiveru" rel="noreferrer">here</a>.</p>


blocks|key|1492521|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1492522|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%2B%2B)+{
++++eval(scripts[i].innerText);
}|code-block|syntax|javascript|1492523|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could do it like this:</p>

<pre><code>var mydiv = document.getElementById("mydiv");
var content = "&lt;script&gt;alert(\"hi\");&lt;\/script&gt;";

mydiv.innerHTML = content;
var scripts = mydiv.getElementsByTagName("script");
for (var i = 0; i &lt; scripts.length; i++) {
    eval(scripts[i].innerText);
}
</code></pre>


blocks|key|1277131|text|是的，你可以，但是你必须在DOM之外完成，并且顺序必须正确。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277132|var+scr+=+'<scr'%2B'ipt>alert("foo")</scr'%2B'ipt>';
window.onload+=+function(){
++++var+n+=+document.createElement("div");
++++n.innerHTML+=+scr;
++++document.body.appendChild(n);
}|code-block|syntax|javascript|1277133|...will警报'foo‘。这是行不通的：|1277134|document.getElementById("myDiv").innerHTML+=+scr;|1277135|即使这样也不会起作用，因为节点是首先插入的：|1277136|var+scr+=+'<scr'%2B'ipt>alert("foo")</scr'%2B'ipt>';
window.onload+=+function(){
++++var+n+=+document.createElement("div");
++++document.body.appendChild(n);
++++n.innerHTML+=+scr;++
}|1277137|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Yes you can, but you have to do it outside of the DOM and the order has to be right.</p>

<pre><code>var scr = '&lt;scr'+'ipt&gt;alert("foo")&lt;/scr'+'ipt&gt;';
window.onload = function(){
    var n = document.createElement("div");
    n.innerHTML = scr;
    document.body.appendChild(n);
}
</code></pre>

<p>...will alert 'foo'. This won't work:</p>

<pre><code>document.getElementById("myDiv").innerHTML = scr;
</code></pre>

<p>And even this won't work, because the node is inserted first:</p>

<pre><code>var scr = '&lt;scr'+'ipt&gt;alert("foo")&lt;/scr'+'ipt&gt;';
window.onload = function(){
    var n = document.createElement("div");
    document.body.appendChild(n);
    n.innerHTML = scr;  
}
</code></pre>


blocks|key|1492730|text|过滤脚本标记，并使用eval运行每个脚本标记|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1492731|var+tmp=++document.createElement('div');
tmp.innerHTML+=+'<script>alert("hello")></script>';
[...tmp.children].filter(x+=>+x.nodeName+===+'SCRIPT').forEach(x+=>+eval(x.innerText));|code-block|syntax|javascript|1492732|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Filter your script tags and run each of them with eval</p>
<pre class="lang-js prettyprint-override"><code>var tmp=  document.createElement('div');
tmp.innerHTML = '&lt;script&gt;alert(&quot;hello&quot;)&gt;&lt;/script&gt;';
[...tmp.children].filter(x =&gt; x.nodeName === 'SCRIPT').forEach(x =&gt; eval(x.innerText));
</code></pre>


blocks|key|1277965|text|下面是mmm's+awesome+solution的一个更现代(也更简洁)的版本|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1277966|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);
++});
}|code-block|syntax|javascript|1277967|注意:我也尝试过使用cloneNode()或outerHTML的替代解决方案，但都不起作用。|1277968|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/20584396/1343851|1|https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode|2|https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML^0|3|M|0|0|0|A|B|1|M|9|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]|$A|15|B|16|1|17]]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

<p>Here's a more modern (and concise) version of <a href="https://stackoverflow.com/a/20584396/1343851">mmm's awesome solution</a>:</p>
<pre><code>function executeScriptElements(containerElement) {
  const scriptElements = containerElement.querySelectorAll(&quot;script&quot;);

  Array.from(scriptElements).forEach((scriptElement) =&gt; {
    const clonedElement = document.createElement(&quot;script&quot;);

    Array.from(scriptElement.attributes).forEach((attribute) =&gt; {
      clonedElement.setAttribute(attribute.name, attribute.value);
    });
    
    clonedElement.text = scriptElement.text;

    scriptElement.parentNode.replaceChild(clonedElement, scriptElement);
  });
}
</code></pre>
<p>Note: I've also tried alternative solutions using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode" rel="nofollow noreferrer">cloneNode()</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML" rel="nofollow noreferrer">outerHTML</a> but that didn't work.</p>


blocks|key|1492238|text|使用$(parent).html(code)而不是parent.innerHTML+=+code。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1492239|下面还修复了使用document.write的脚本和通过src属性加载的脚本。不幸的是，即使这样也不能与谷歌的AdSense脚本一起工作。|1492240|var+oldDocumentWrite+=+document.write;
var+oldDocumentWriteln+=+document.writeln;
try+{
++++document.write+=+function(code)+{
++++++++$(parent).append(code);
++++}
++++document.writeln+=+function(code)+{
++++++++document.write(code+%2B+"<br/>");
++++}
++++$(parent).html(html);+
}+finally+{
++++$(window).load(function()+{
++++++++document.write+=+oldDocumentWrite
++++++++document.writeln+=+oldDocumentWriteln
++++})
}|code-block|syntax|javascript|1492241|Source|1492242|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml^0|2|K|P|N|0|8|E|S|3|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Use <code>$(parent).html(code)</code> instead of <code>parent.innerHTML = code</code>.</p>

<p>The following also fixes scripts that use <code>document.write</code> and scripts loaded via <code>src</code> attribute. Unfortunately even this doesn't work with Google AdSense scripts.</p>

<pre><code>var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
    document.write = function(code) {
        $(parent).append(code);
    }
    document.writeln = function(code) {
        document.write(code + "&lt;br/&gt;");
    }
    $(parent).html(html); 
} finally {
    $(window).load(function() {
        document.write = oldDocumentWrite
        document.writeln = oldDocumentWriteln
    })
}
</code></pre>

<p><a href="https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml">Source</a></p>


blocks|key|1492502|text|尝试使用模板和document.importNode。下面是一个示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1492503|​|1492504|<!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%2B%2B){
++++var+node+=+document.importNode(t.content.childNodes[i],+true);
++++div.appendChild(node);
++}
+document.body.appendChild(div);
</script>
+
</body>
</html>|code-block|syntax|javascript|1492505|1492506|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Try using template and document.importNode. Here is an example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Sample&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1 id="hello_world"&gt;Sample&lt;/h1&gt;
&lt;script type="text/javascript"&gt;
 var div = document.createElement("div");
  var t = document.createElement('template');
  t.innerHTML =  "Check Console tab for javascript output: Hello world!!!&lt;br/&gt;&lt;script type='text/javascript' &gt;console.log('Hello world!!!');&lt;\/script&gt;";
  
  for (var i=0; i &lt; t.content.childNodes.length; i++){
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
  }
 document.body.appendChild(div);
&lt;/script&gt;
 
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1277835|text|你也可以像这样包装你的<script>，它将被执行：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1277836|<your+target+node>.innerHTML+=+'<iframe+srcdoc="<script>alert(top.document.title);</script>"></iframe>';|code-block|syntax|javascript|1277837|请注意：srcdoc中的作用域是指iframe，因此您必须像上面的示例一样使用top来访问父文档。|1277838|entityMap^0|B|8|0|0|4|6|13|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>You can also wrap your <code>&lt;script&gt;</code> like this and it will get executed:</p>

<pre><code>&lt;your target node&gt;.innerHTML = '&lt;iframe srcdoc="&lt;script&gt;alert(top.document.title);&lt;/script&gt;"&gt;&lt;/iframe&gt;';
</code></pre>

<p>Please note: The scope inside <code>srcdoc</code> refers to the iframe, so you have to use <code>top</code> like in the example above to access the parent document.</p>


blocks|key|1492454|text|我对这个问题的解决方案是设置一个Mutation+Observer来检测<script></script>节点，然后用一个具有相同src的新<script></script>节点替换它。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1492455|let+parentNode+=+/*+node+to+observe+*/+void+0
let+observer+=+new+MutationObserver(mutations=>{
++++mutations.map(mutation=>{
++++++++Array.from(mutation.addedNodes).map(node=>{
++++++++++++if+(+node.parentNode+==+parentNode+)+{
++++++++++++++++let+scripts+=+node.getElementsByTagName('script')
++++++++++++++++Array.from(scripts).map(script=>{
++++++++++++++++++++let+src+=+script.src
++++++++++++++++++++script+=+document.createElement('script')
++++++++++++++++++++script.src+=+src
++++++++++++++++++++return+script
++++++++++++++++})
++++++++++++}
++++++++})
++++})
})
observer.observe(document.body,+{childList:+true,+subtree:+true});|code-block|syntax|javascript|1492456|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver^0|10|H|1Y|H|G|H|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>My solution for this problem is to set a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noreferrer">Mutation Observer</a> to detect <code>&lt;script&gt;&lt;/script&gt;</code> nodes and then replace it with a new <code>&lt;script&gt;&lt;/script&gt;</code> node with the same src. For example:</p>

<pre><code>let parentNode = /* node to observe */ void 0
let observer = new MutationObserver(mutations=&gt;{
    mutations.map(mutation=&gt;{
        Array.from(mutation.addedNodes).map(node=&gt;{
            if ( node.parentNode == parentNode ) {
                let scripts = node.getElementsByTagName('script')
                Array.from(scripts).map(script=&gt;{
                    let src = script.src
                    script = document.createElement('script')
                    script.src = src
                    return script
                })
            }
        })
    })
})
observer.observe(document.body, {childList: true, subtree: true});
</code></pre>


blocks|key|1277792|text|Gabriel+Garcia对MutationObservers的提及是正确的，但对我来说并不是很有效。我不确定这是因为浏览器的怪癖还是我的错误，但最终为我工作的版本如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277793|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});
};|code-block|syntax|javascript|1277794|当然，您应该将element_to_watch替换为正在修改的元素的名称。|offset|length|style|CODE|1277795|node.parentElement.added用于存储添加到document.head中的脚本标记。在用于加载外部页面的函数中，您可以使用类似以下内容来删除不再相关的脚本标记：|1277796|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]);
++++}
}|1277797|以及load函数开头的示例：|1277798|function+load(url,+id,+replace)+{
++++if+(document.getElementById(id)+===+null)+{
++++++++console.error("Element+of+ID+"%2Bid+%2B+"+does+not+exist!");
++++++++return;
++++}
++++freeScripts(document.getElementById(id));
++++var+xhttp+=+new+XMLHttpRequest();
++++//+proceed+to+load+in+the+page+and+modify+innerHTML
}|1277799|entityMap^0|0|0|7|G|0|0|O|V|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@$I|12|J|13|K|L]|$I|14|J|15|K|L]]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

<p>Gabriel Garcia's mention of MutationObservers is on the right track, but didn't quite work for me. I am not sure if that was because of a browser quirk or due to a mistake on my end, but the version that ended up working for me was the following:</p>

<pre><code>document.addEventListener("DOMContentLoaded", function(event) {
    var observer = new MutationObserver(mutations=&gt;{
        mutations.map(mutation=&gt;{
            Array.from(mutation.addedNodes).map(node=&gt;{
                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});
};
</code></pre>

<p>Of course, you should replace <code>element_to_watch</code> with the name of the element that is being modified.</p>

<p><code>node.parentElement.added</code> is used to store the script tags that are added to <code>document.head</code>. In the function used to load the external page, you can use something like the following to remove no longer relevant script tags:</p>

<pre><code>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]);
    }
}
</code></pre>

<p>And an example of the beginning of a load function:</p>

<pre><code>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
}
</code></pre>


blocks|key|1492797|text|简单，没有eval，没有函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1492798|++++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)
++++++})++++++
++})|code-block|syntax|javascript|1492799|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>simple, no eval, no functions:</p>
<pre><code>    fetch('/somepage')
    .then(x=&gt;x.text())
    .then(x=&gt;{
      divDestination.innerHTML=x;
        divDestination.querySelectorAll(&quot;script&quot;)
        .forEach(x=&gt;{
          var sc=document.createElement(&quot;script&quot;);
          sc.appendChild(document.createTextNode(x.innerText));
          divDestination.appendChild(sc)
      })      
  })
</code></pre>


blocks|key|1277301|text|从innerHTML执行(Java+Script)标签|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277302|将脚本元素替换为具有类属性class="javascript“的div，并使用</div>关闭它|offset|length|style|CODE|1277303|不要改变你想要执行的内容(以前是在script标签中，现在是在div标签中)|1277304|在页面中添加样式...|1277305|<style+type="text/css">+.javascript+{+display:+none;+}+</style>|1277306|现在使用Jquery运行eval+(应该已经包含了Jquery+js+)|1277307|+++$('.javascript').each(function()+{
++++++eval($(this).text());

++++});`|code-block|syntax|javascript|1277308|你可以在我的博客上探索更多的here。|1277309|entityMap|0|LINK|mutability|MUTABLE|url|http://knowledge-serve.blogspot.in/2013/01/execute-scripts-inside.html^0|0|13|6|0|0|0|0|1R|0|0|0|E|4|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1D|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1E|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|W|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Execute  (Java Script) tag from innerHTML</p>

<p>Replace your script element with div having a class attribute class="javascript" and close it with <code>&lt;/div&gt;</code></p>

<p>Don't change the content that you want to execute (previously it was in script tag and now it is in div tag)   </p>

<p>Add a style in your page...</p>

<p><code>&lt;style type="text/css"&gt; .javascript { display: none; } &lt;/style&gt;</code></p>

<p>Now run  eval using jquery(Jquery js should be already included)</p>

<pre><code>   $('.javascript').each(function() {
      eval($(this).text());

    });`
</code></pre>

<p>You can explore more <a href="http://knowledge-serve.blogspot.in/2013/01/execute-scripts-inside.html" rel="nofollow">here</a>, at my blog.</p>


blocks|key|1277893|text|对我来说，最好的方法是通过innerHtml插入新的超文本标记语言内容，然后使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277894|setTimeout(()+=>+{
++++++++var+script_el+=+document.createElement("script")
++++++++script_el.src+=+'script-to-add.js'
++++++++document.body.appendChild(script_el)
++++},+500)|code-block|syntax|javascript|1277895|setTimeout不是必需的，但它工作得更好。这对我很有效。|1277896|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>For me the best way is to insert the new HTML content through innerHtml and then use</p>

<pre><code>setTimeout(() =&gt; {
        var script_el = document.createElement("script")
        script_el.src = 'script-to-add.js'
        document.body.appendChild(script_el)
    }, 500)
</code></pre>

<p>The setTimeout is not required but it works better. This worked for me.</p>


<p>I tried to load some scripts into a page using <code>innerHTML</code> on a <code>&lt;div&gt;</code>. It appears that the script loads into the DOM, but it is never executed (at least in Firefox and Chrome). Is there a way to have scripts execute when inserting them with <code>innerHTML</code>?</p>

<p>Sample code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body onload="document.getElementById('loader').innerHTML = '&lt;script&gt;alert(\'hi\')&lt;\/script&gt;'"&gt;
    Shouldn't an alert saying 'hi' appear?
    &lt;div id="loader"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


Can scripts be inserted with innerHTML?

服务器

jQuery

Java

我尝试在<div>上使用innerHTML将一些脚本加载到页面中。脚本似乎加载到了DOM中，但从来没有执行过(至少在Firefox和Chrome中是这样)。有没有办法在使用innerHTML插入脚本时执行这些脚本示例代码：​<!DOCTYPE html><html>  <body onload="document.getElementById('loader').innerHTML = '<scr

问可以使用innerHTML插入脚本吗？
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以使用innerHTML插入脚本吗？EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以使用innerHTML插入脚本吗？
EN