使用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);
});