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

IMONS 2017-05-23 11:07:51
先直接上代码。
<!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>

浏览器控制台输出如下：

很明显，丢失了一个</script>标签。原因就是对<script>标签进行了错误的匹配。
Google了一番，在stackoverflow上找到了两个相关话题。
https://stackoverflow.com/questions/2699320/jquery-script-tags-in-the-html-are-parsed-out-by-jquery-and-not-executed
https://stackoverflow.com/questions/4079179/jquery-html-strips-out-script-tags
请教一下大家，这种script标签嵌套的情况下，如何可以得到正确的html内容。

...全文
541 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
漠子凉 2017-05-26
  • 打赏
  • 举报
 回复
这个buton可以换成a这样跳转到横版页的时候就可以带参数href="/#button"
漠子凉 2017-05-26
  • 打赏
  • 举报
 回复
现在直接实战给你看吧

看着上面那个图，你会发现，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>



漠子凉 2017-05-26
  • 打赏
  • 举报
 回复
IMONS 2017-05-26
  • 打赏
  • 举报
 回复
引用 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方法。
漠子凉 2017-05-25
  • 打赏
  • 举报
 回复
为什么它那里没有报错呢？ 你看它的 <script type="text/html"> 它默认读取为html
漠子凉 2017-05-25
  • 打赏
  • 举报
 回复
我看了它的源代码，用了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没啥区别
漠子凉 2017-05-25
  • 打赏
  • 举报
 回复
其实它讲到的是路由
IMONS 2017-05-25
  • 打赏
  • 举报
 回复
引用 7 楼 xiaojunjor 的回复:
为什么要在一个script里嵌一个script。。。好奇怪的写法，而且这么写看起来不乱吗
亲，8#有写为什么这样写的说明。
IMONS 2017-05-25
  • 打赏
  • 举报
 回复
引用 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代码不被执行。
xiaojunjor 2017-05-25
  • 打赏
  • 举报
 回复
为什么要在一个script里嵌一个script。。。好奇怪的写法，而且这么写看起来不乱吗
漠子凉 2017-05-25
  • 打赏
  • 举报
 回复
问题是你为啥要这样用。说一下需求
IMONS 2017-05-25
  • 打赏
  • 举报
 回复
引用 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标签内容很长，就需要构造一个非常长的字符串。有没有别的办法呀，亲。
漠子凉 2017-05-23
  • 打赏
  • 举报
 回复
<script> var script= document.createElement('script'); var str = 'var num = 1;alert(num);'; document.body.appendChild(script); script.innerHTML = str; </script>
漠子凉 2017-05-23
  • 打赏
  • 举报
 回复
<script id="abc"> var script= document.createElement('script'); var str = 'var num = 1;alert(num);'; document.getElementById('abc').appendChild(script); script.innerHTML = str; </script>
漠子凉 2017-05-23
  • 打赏
  • 举报
 回复
变通一下嘛 

告诉了你原理你应该就知道拉
这时动态生成script的原理嘛
给你加个id
        	var script= document.createElement('script'); 
        	var str = 'var num = 1;alert(num);';
        	document.getElementById('abc').appendChild(script);
        	script.innerHTML = str;
IMONS 2017-05-23
  • 打赏
  • 举报
 回复
引用 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>标签匹配错乱的情况。
jQuery获取当前点击的对象元素(实现代码)
<script type="text/javascript" src="script/jquery-1.8.3.js"></script> ``` 接下来，文章通过一个具体的HTML和jQuery结合的例子来演示如何获取当前点击的对象。在页面中，有五个段落元素（`<p>`标签），我们希望...
jQuery学习笔记精心整理
- **引入方法**：使用`<script>`标签将jQuery.js引入到网页中，然后编写自定义脚本。 #### 三、jQuery原理 1. **全局类型**：引入jQuery.js后，会在内存中添加一个名为`jQuery`的全局类型。 2. **组成**： - **...
javascript和jquery分别实现用户登录验证
总的来说，无论是使用jQuery还是原生JavaScript，这两种方法都可以实现实时的用户登录验证，提供良好的用户体验，同时保证安全性。不过，需要注意的是，实际生产环境中，为了安全起见，密码通常不应明文传输，而是...
基于javascript实现仿百度输入框自动匹配功能
总的来说，通过JavaScript实现的自动匹配功能能够极大地提升用户体验，使得用户在输入时能够快速找到想要的内容。结合AJAX，我们可以从服务器获取实时的匹配数据，从而提供更加智能和动态的输入建议。
整理一些最近经常遇到的前端面试题
jquery的方法是$(“#div1”).html()，原生js的方法是document.getElementById(“div1”).innerHTML或document.querySelector(“#div1”).innerText。 6. 封装一个添加监听事件的兼容写法： 可以使用addEvent函数来...
JavaScript

87,993

社区成员

224,689

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章