关于text/html的使用

来源：互联网发布：专业的绘画软件编辑：程序博客网时间：2024/04/30 00:00

包含在<script type="text/html"></script>内的html会被浏览器忽略，但我们还可以通过js/jquery去访问(HTML markup in a <script> element is effectively ignored by the web browser, yet still accessible by Javascript or jQuery using the <script> element’s id attribute.)。

这里“被忽略”不仅仅是不显示，在这个标签内的内容对浏览器来说也是不可见的，除非通过text()/html()去访问。这点跟<div style="dispaly:none"></div>是有区别的，display:none虽然不可见，但其内容对浏览器是可见的。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script src="js/jquery.min.js"></script>    <script>        $(function () {            $("#hello").html($("#internal").html());            console.log($("[name='cnt']"));        })    </script></head><body>    <div id="hello"></div>    <div id="internal" style="display:none">        <div name="cnt">hello</div>    </div></body></html>

结果：

n.fn.init[2]

如果用type="text/html"的话：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script src="js/jquery.min.js"></script>    <script>        $(function () {            $("#hello").html($("#internal").html());            console.log($("#cnt"));        })    </script></head><body>    <div id="hello"></div>    <script type="text/html" id="internal">        <div id="cnt">hello</div>    </script></body></html>

结果：

n.fn.init[1]

其他问题：

对普通的html和js代码，以上示例都是没问题的，但当有<script src="">或<link href="">时，type="text/html"可能会出现这些外部的js/css不能加载的问题的。

顺便查了一下text/html的使用场景，发现好多人都是在js模板中使用(模板用起来比较简单，用法跟django的很像，2012年以前大行其道的是jquery tmpl，现在貌似要被jsRender取代了)

1、jquery tmpl的简单使用：https://github.com/BorisMoore/jquery-tmpl

2、jsRender的简单使用：http://www.jsviews.com/#jsrender

0 0