jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误

时间：2021-10-23 15:19:49
先直接上代码。 
<!DOCTYPE html>

<html lang="zh-CN">


<head>

    <meta charset="utf-8">

    <script src="../lib/jquery-2.1.4.js"></script>

</head>


<body>

    <div>nothing</div>

    <script type="text/html" id="apple">

        <div>

            一个苹果

        </div>

        <script type="text/javascript">

        var num = 1;

        alert(num);

        </script>

    </script>

</body>

<script type="text/javascript">

console.log($("#apple").html());

//console.log(document.getElementById('apple').innerHTML);

</script>


</html>

浏览器控制台输出如下：
jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误
很明显，丢失了一个</script>标签。原因就是对<script>标签进行了错误的匹配。
Google了一番，在*上找到了两个相关话题。
https://*.com/questions/2699320/jquery-script-tags-in-the-html-are-parsed-out-by-jquery-and-not-executed
https://*.com/questions/4079179/jquery-html-strips-out-script-tags
请教一下大家，这种script标签嵌套的情况下，如何可以得到正确的html内容。

16 个解决方案

#1

       <script>
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.body.appendChild(script);
         script.innerHTML = str;
        </script>

#2

引用 1 楼 sinat_34353062 的回复:
       <script>
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.body.appendChild(script);
         script.innerHTML = str;
        </script>


你这样创建一个script标签，附加到body部分。与如下是等同的吧。 


<body>

    <div>nothing</div>

    <script type="text/html" id="apple">

        <div>

            一个苹果

        </div>

    </script>

    <script type="text/javascript">

        var num = 1;

    </script>

</body>

我要请教的是在script嵌套的情况下，如何通过html()方法正确获取网页内容，不出<script>标签匹配错乱的情况。

#3

变通一下嘛 


告诉了你原理你应该就知道拉

这时动态生成script的原理嘛

给你加个id

        	var script= document.createElement('script'); 

        	var str = 'var num = 1;alert(num);';

        	document.getElementById('abc').appendChild(script);

        	script.innerHTML = str;

#4

        <script id="abc">
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.getElementById('abc').appendChild(script);
         script.innerHTML = str;
        </script>

#5

引用 4 楼 sinat_34353062 的回复:
        <script id="abc">
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.getElementById('abc').appendChild(script);
         script.innerHTML = str;
        </script>

这样虽然是个办法，但是如果我内嵌的那个script标签内容很长，就需要构造一个非常长的字符串。有没有别的办法呀，亲。

#6

问题是你为啥要这样用。说一下需求

#7

为什么要在一个script里嵌一个script。。。好奇怪的写法，而且这么写看起来不乱吗

#8

引用 6 楼 sinat_34353062 的回复:
问题是你为啥要这样用。说一下需求

需求是这样的。
微信WEUI展示页
官方给了这个页面的远吗，里面实现了一种单页前端路由控制页面跳转。在index.html中就包含了多个模板页，每个模板页的代码如下： 
<script type="text/html" id="tpl_xx">模板页</script>

模板页中有html代码，也有js代码。（这样就出现了script标签嵌套）
我看了下官方的js文件，
某博客对该js文件的大概介绍
看的不是很懂，在_go方法中有如下两段代码： 


var html = $(config.template).html();

var $html = $(html).addClass('slideIn').addClass(config.name);

this.$container.append($html);

我感觉就是在这边根据hash（url中#后面的内容）变化，取到对应模板页中的html内容，然后重新渲染页面。（也不知道是不是这样子）
我现在遇到的问题就是，模板页中的js方法不能执行了，然后同时也发现了jquery的html()方法会出现<script>标签匹配错误的情况。因此猜想是否因为这个原因，导致模板页代码不完整，进而导致模板页中的js代码不被执行。

#9

引用 7 楼 xiaojunjor 的回复:
为什么要在一个script里嵌一个script。。。好奇怪的写法，而且这么写看起来不乱吗

亲，8#有写为什么这样写的说明。

#10

其实它讲到的是路由

#11

我看了它的源代码，用了jq的load方法，这个我之前也用过，跟iframe相似
它的意思是(下面我按照我的想法来给你解释)
比如
在列表1里面有个button,
先获取你点击的button位置的text(),这个时候获取到button这个字符串
然后它去找script里面的id="tpl_xx"
看哪个xx等于刚才获取到的字符串，就像刚才获取到button,就处理获取到了script id="tpl_button"这个script
然后横版有个父页面，假设横版页的id="fu"
它先把fu.html()清空
然后把scirpt id="tpl_button"的html()内容load()进fu.html()里面
大概就这样
load其实跟以前的iframe一样
就是换个src没啥区别

#12

为什么它那里没有报错呢？
你看它的
<script type="text/html">
它默认读取为html

#13

引用 11 楼 sinat_34353062 的回复:
我看了它的源代码，用了jq的load方法，这个我之前也用过，跟iframe相似
它的意思是(下面我按照我的想法来给你解释)
比如
在列表1里面有个button,
先获取你点击的button位置的text(),这个时候获取到button这个字符串
然后它去找script里面的id="tpl_xx"
看哪个xx等于刚才获取到的字符串，就像刚才获取到button,就处理获取到了script id="tpl_button"这个script
然后横版有个父页面，假设横版页的id="fu"
它先把fu.html()清空
然后把scirpt id="tpl_button"的html()内容load()进fu.html()里面
大概就这样
load其实跟以前的iframe一样
就是换个src没啥区别

横版的父页面是一个DIV，他的id选择器是container。我怎么就没发现源码中有load方法以及对这个DIV清空。只看到了append方法。 jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误

#14

jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误

#15

现在直接实战给你看吧
jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误
看着上面那个图，你会发现，class=page是路由load的，load的button里面的那堆html页面，就找到id=button的script
然后最后是让他显示出来，js_show就是把本来隐藏的横版display:block一样
这三个class都是事先写好css的


它load的是图片缓存图片。搞错，确实是append<script>里面的内容
教你一个例子 



        <script src="js/jquery-3.1.1.js"></script>

        <style>

            html,body {

                width: 100%;

                height: 100%;               

            }

            * {

                margin: 0;

                padding: 0;

            }

            .page {

                width: 100%;

                height: 100%;

                background-color: red;

                position: absolute;

                z-index: 1;

                top: 0;

                display: none;

            }

            .js_show {

                display: block;

            }

        </style>

    </head>


    <body>

        <button id="open">点我</button>

            


        <script>

        $('#open').click(function() {

            $('#open').after('<div class="page"></div>');

            $('.page').append($('#button').html());

            $('.page').addClass('button');

            $('.page').addClass('js_show');

        });

        </script>

        <script type="text/html" id="button">

            <button>我是按钮页面</button>

        </script>

    </body>



#16

这个buton可以换成a这样跳转到横版页的时候就可以带参数href="/#button"

#1

       <script>
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.body.appendChild(script);
         script.innerHTML = str;
        </script>

#2

引用 1 楼 sinat_34353062 的回复:
       <script>
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.body.appendChild(script);
         script.innerHTML = str;
        </script>


你这样创建一个script标签，附加到body部分。与如下是等同的吧。 


<body>

    <div>nothing</div>

    <script type="text/html" id="apple">

        <div>

            一个苹果

        </div>

    </script>

    <script type="text/javascript">

        var num = 1;

    </script>

</body>

我要请教的是在script嵌套的情况下，如何通过html()方法正确获取网页内容，不出<script>标签匹配错乱的情况。

#3

变通一下嘛 


告诉了你原理你应该就知道拉

这时动态生成script的原理嘛

给你加个id

        	var script= document.createElement('script'); 

        	var str = 'var num = 1;alert(num);';

        	document.getElementById('abc').appendChild(script);

        	script.innerHTML = str;

#4

        <script id="abc">
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.getElementById('abc').appendChild(script);
         script.innerHTML = str;
        </script>

#5

引用 4 楼 sinat_34353062 的回复:
        <script id="abc">
         var script= document.createElement('script'); 
         var str = 'var num = 1;alert(num);';
         document.getElementById('abc').appendChild(script);
         script.innerHTML = str;
        </script>

这样虽然是个办法，但是如果我内嵌的那个script标签内容很长，就需要构造一个非常长的字符串。有没有别的办法呀，亲。

#6

问题是你为啥要这样用。说一下需求

#7

为什么要在一个script里嵌一个script。。。好奇怪的写法，而且这么写看起来不乱吗

#8

引用 6 楼 sinat_34353062 的回复:
问题是你为啥要这样用。说一下需求

需求是这样的。
微信WEUI展示页
官方给了这个页面的远吗，里面实现了一种单页前端路由控制页面跳转。在index.html中就包含了多个模板页，每个模板页的代码如下： 
<script type="text/html" id="tpl_xx">模板页</script>

模板页中有html代码，也有js代码。（这样就出现了script标签嵌套）
我看了下官方的js文件，
某博客对该js文件的大概介绍
看的不是很懂，在_go方法中有如下两段代码： 


var html = $(config.template).html();

var $html = $(html).addClass('slideIn').addClass(config.name);

this.$container.append($html);

我感觉就是在这边根据hash（url中#后面的内容）变化，取到对应模板页中的html内容，然后重新渲染页面。（也不知道是不是这样子）
我现在遇到的问题就是，模板页中的js方法不能执行了，然后同时也发现了jquery的html()方法会出现<script>标签匹配错误的情况。因此猜想是否因为这个原因，导致模板页代码不完整，进而导致模板页中的js代码不被执行。

#9

引用 7 楼 xiaojunjor 的回复:
为什么要在一个script里嵌一个script。。。好奇怪的写法，而且这么写看起来不乱吗

亲，8#有写为什么这样写的说明。

#10

其实它讲到的是路由

#11

我看了它的源代码，用了jq的load方法，这个我之前也用过，跟iframe相似
它的意思是(下面我按照我的想法来给你解释)
比如
在列表1里面有个button,
先获取你点击的button位置的text(),这个时候获取到button这个字符串
然后它去找script里面的id="tpl_xx"
看哪个xx等于刚才获取到的字符串，就像刚才获取到button,就处理获取到了script id="tpl_button"这个script
然后横版有个父页面，假设横版页的id="fu"
它先把fu.html()清空
然后把scirpt id="tpl_button"的html()内容load()进fu.html()里面
大概就这样
load其实跟以前的iframe一样
就是换个src没啥区别

#12

为什么它那里没有报错呢？
你看它的
<script type="text/html">
它默认读取为html

#13

引用 11 楼 sinat_34353062 的回复:
我看了它的源代码，用了jq的load方法，这个我之前也用过，跟iframe相似
它的意思是(下面我按照我的想法来给你解释)
比如
在列表1里面有个button,
先获取你点击的button位置的text(),这个时候获取到button这个字符串
然后它去找script里面的id="tpl_xx"
看哪个xx等于刚才获取到的字符串，就像刚才获取到button,就处理获取到了script id="tpl_button"这个script
然后横版有个父页面，假设横版页的id="fu"
它先把fu.html()清空
然后把scirpt id="tpl_button"的html()内容load()进fu.html()里面
大概就这样
load其实跟以前的iframe一样
就是换个src没啥区别

横版的父页面是一个DIV，他的id选择器是container。我怎么就没发现源码中有load方法以及对这个DIV清空。只看到了append方法。 jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误

#14

jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误

#15

现在直接实战给你看吧
jquery的html()方法及原生js的innerHTML获取网页内容时 script标签匹配错误
看着上面那个图，你会发现，class=page是路由load的，load的button里面的那堆html页面，就找到id=button的script
然后最后是让他显示出来，js_show就是把本来隐藏的横版display:block一样
这三个class都是事先写好css的


它load的是图片缓存图片。搞错，确实是append<script>里面的内容
教你一个例子 



        <script src="js/jquery-3.1.1.js"></script>

        <style>

            html,body {

                width: 100%;

                height: 100%;               

            }

            * {

                margin: 0;

                padding: 0;

            }

            .page {

                width: 100%;

                height: 100%;

                background-color: red;

                position: absolute;

                z-index: 1;

                top: 0;

                display: none;

            }

            .js_show {

                display: block;

            }

        </style>

    </head>


    <body>

        <button id="open">点我</button>

            


        <script>

        $('#open').click(function() {

            $('#open').after('<div class="page"></div>');

            $('.page').append($('#button').html());

            $('.page').addClass('button');

            $('.page').addClass('js_show');

        });

        </script>

        <script type="text/html" id="button">

            <button>我是按钮页面</button>

        </script>

    </body>



#16

这个buton可以换成a这样跳转到横版页的时候就可以带参数href="/#button"
标签：

相关文章