美文网首页HTML
[HTML] innerHTML插入含script的文本

[HTML] innerHTML插入含script的文本

作者: 何幻 | 来源:发表于2016-03-22 10:29 被阅读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);
});

相关文章

  • [HTML] innerHTML插入含script的文本

    使用innerHTML插入含 的文本,这些 会被加入DOM中,但不会执行。 (1)插入script片段 结果:sc...

  • 2.在HTML中使用JavaScript

    1. script元素 向HTML中插入JavaScript的主要方法,就是使用script标签 HTML 4.0...

  • 一、JS代码插入方法 1.使用标签在html网页文档中插入javascript代...

  • 模块加载标准

    熟悉模块加载标准之后 浏览器 html 文本插入非常多 script 标签时,异步加载这些标签,使页面响应速度变快...

  • 第2章 在HTML中使用JavaScript

    向HTML页面中插入JavaScript的主要方法,使用 元素。 1. script元素 1.1