HTML 标签如何在脚本标签中工作?
Posted
技术标签:
【中文标题】HTML 标签如何在脚本标签中工作?【英文标题】:How does HTML tags work inside script tag? 【发布时间】:2011-08-06 11:00:30 【问题描述】:例如,查看源代码Joel Spolsky's public career profile
<script type="text/html" id="stackexchangeanswerswidget">
<h3>Top Answers</h3>
<div class="answers">
</div>
</script>
<script type="text/html" id="topanswer">
<div class="top-answer">
<div class="top-answer-stats">= shared.htmlEncode(Score) </div>
<span class="top-answer-title"><a href="=AnswerLink">= shared.htmlEncode(Title) </a></span>
<a class="add-answer">add</a>
<br class="clear" />
</div>
</script>
<script type="text/html" id="answer-view">
<div class="answer">
<div class="answer-stats = shared.htmlEncode(Site.toLowerCase().replace(/ /g, '')) ">
<div class="score">
<strong>= shared.htmlEncode(Score) </strong>
<div class="votecount">votes</div>
</div>
<img class="answer-logo" src="= shared.htmlEncode(FaviconUrl) " />
</div>
<div class="answer-content">
<span class="q">Q:</span>
<div class="answer-top">
<a class="answer-title" href="= shared.htmlEncode(AnswerLink) ">= shared.htmlEncode(Title) </a><br />
</div>
<span class="a">A:</span><div class="answer-body">= Body </div>
<div class="more-button" style="text-align:center; clear:both; display:none;"><a class="more">More</a></div>
</div>
</div>
</script>
HTML 标签在脚本标签中是如何工作的?和/或这些 html 标签和模板类似代码 = ....
在脚本标签内使用了什么样的技术?
【问题讨论】:
可能类似于 Mustache - mustache.github.com 【参考方案1】:您可以在<script>
标记中添加任何您想要的内容。如果您指定的内容类型不是 javascript(或浏览器可以理解的另一种脚本语言),浏览器不会对其进行解释,您可以将其作为纯文本访问。由于 <script>
标记的内容被视为 CDATA,因此不会解析内容,您可以在内容中存储未引用的 XML 或 HTML(只要您从未在内容中放置 </script>
标记,因为将关闭您的元素)。
这用于,例如,SVG Web,这是一种 polyfill,允许您在 HTML 中使用内联 SVG,并在支持它的浏览器中将其转换为原生 SVG,或在不支持它的浏览器中转换为 Flash。它允许通过将 SVG 包装在 <script>
标记中来将 SVG 嵌入到本机不支持它的浏览器中,因此浏览器不会尝试将其解析为 HTML。
对于 SO carreers,看起来他们在 <script>
标记中存储模板以供 Backbone.js 和 Underscore.js 使用,因为这是在 HTML 中粘贴模板的方便位置。这是他们获取模板并将其提供给 Underscore 模板引擎的代码的 sn-p:
TopAnswerView = Backbone.View.extend(
template: _.template($("#topanswer").html()),
events:
"click .add-answer": "addAnswerToCV"
,
【讨论】:
【参考方案2】:关键在于脚本的 type 属性。通过将其设置为 type="text/html" 它不会被浏览器的 JavaScript 引擎运行。相反,它用于其他事情,例如模板。此示例似乎将这些标签用于模板。
观看 MIX 2011 网络广播,它展示了如何在 Knockout.js 中使用类似的东西:
http://channel9.msdn.com/events/mix/mix11/FRM08
【讨论】:
这里有一些其他的例子:blog.reybango.com/2010/07/09/…, ...和***.com/questions/3241387/…以上是关于HTML 标签如何在脚本标签中工作?的主要内容,如果未能解决你的问题,请参考以下文章
vue-apollo:GraphQL 查询仅在使用 <ApolloQuery> 标签时运行。永远不会在脚本代码中工作。 this.$apollo.queries 为空
jquery on('change'......不能在多个标签中工作[重复]
谷歌标签管理器无法在 Ionic+Angular 应用程序中工作