[HTML] innerHTML插入含script的文本
2016-03-22 本文已影响746人
何幻
使用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);
});
