[HTML] innerHTML插入含script的文本

使用innerHTML插入含<script>的文本，这些<script>会被加入DOM中，但不会执行。

（1）插入script片段

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
    </head>
    <body>
        <div id="div1"></div>
        <script src="1.js"></script>
    </body>
</html>

//1.js
document.getElementById('div1').innerHTML='<script>alert();</script>';

结果：script中的代码片段，不会执行

<div id="div1"><script>alert();</script></div>

（2）插入含src的script

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
    </head>
    <body>
        <div id="div1"></div>
        <script src="1.js"></script>
    </body>
</html>

//1.js
document.getElementById('div1').innerHTML='<script src="2.js"></script>';

//2.js
alert();

结果：2.js不会被请求执行

<div id="div1"><script src="2.js"></script></div>

注：
（1）<script></script>标签之间不能包含文本</script>，因为会被看做html结束标签
例如：

<script>
    document.getElementById('div1').innerHTML='<script>alert();</script>';
</script>

结果：Uncaught SyntaxError: Unexpected token ILLEGAL

（2）如果想要执行script，可以用正则匹配，然后通过动态创建script标签的方式实现。
例如：

var source='123<script>alert(1)</script>456<script>alert(2)</script>';
var regexp=/<script>(.*?)<\/script>/g;

var codes=[];
var result=source.replace(regexp,function(script,code){
    codes.push(code);
    return '';
});

var container=document.getElementById('div1');
container.innerHTML=result;
codes.forEach(function(code){
    var script=document.createElement('script');
    script.innerHTML=code;
    container.appendChild(script);
});

[HTML] innerHTML插入含script的文本

推荐阅读更多精彩内容