使用innerHTML
插入含<script>
的文本切诀,這些<script>
會被加入DOM中养距,但不會執(zhí)行蝗砾。
(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>';
結(jié)果:script中的代碼片段矾端,不會執(zhí)行
<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();
結(jié)果:2.js不會被請求執(zhí)行
<div id="div1"><script src="2.js"></script></div>
注:
(1)<script></script>
標(biāo)簽之間不能包含文本</script>
掏击,因?yàn)闀豢醋鰄tml結(jié)束標(biāo)簽
例如:
<script>
document.getElementById('div1').innerHTML='<script>alert();</script>';
</script>
結(jié)果:Uncaught SyntaxError: Unexpected token ILLEGAL
(2)如果想要執(zhí)行script,可以用正則匹配秩铆,然后通過動態(tài)創(chuàng)建script標(biāo)簽的方式實(shí)現(xiàn)铐料。
例如:
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);
});