HTML 标签如何在 script 标签内工作?

2024-01-17

例如,查看源代码乔尔·斯波尔斯基的公开职业生涯简介 http://careers.stackoverflow.com/spolsky

<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 标签如何在 script 标签内工作?和/或这些 html 标签和类似模板的代码使用了哪些技术{{= .... }}在脚本标签内?


您可以将任何您想要的东西放入<script>标签。如果您指定 Javascript(或浏览器可以理解的其他脚本语言)以外的内容类型,则浏览器不会解释它,您只能以纯文本形式访问它。由于内容<script>标签被视为 CDATA,内容不会被解析,并且您可以在内容中存储不带引号的 XML 或 HTML(只要您不放置</script>内容中的标记,因为这将关闭您的元素)。

例如,这用于SVG Web http://code.google.com/p/svgweb/,一个polyfill,允许您在HTML中使用内联SVG,并在支持它的浏览器中将其转换为原生SVG,或者在不支持它的浏览器中转换为Flash。它允许将 SVG 嵌入到本身不支持 SVG 的浏览器中,方法是将其包装在<script>标记,因此浏览器不会尝试将其解析为 HTML,但会失败。

对于 SO 职业者来说,看起来他们存储了用于以下用途的模板:骨干网.js http://documentcloud.github.com/backbone/ and 下划线.js http://documentcloud.github.com/underscore/ in <script>标签,因为这是在 HTML 中粘贴模板的方便位置。这是他们获取模板并将其提供给 Underscore 模板引擎的代码片段:

    TopAnswerView = Backbone.View.extend({
        template: _.template($("#topanswer").html()),
        events: {
            "click .add-answer": "addAnswerToCV"
        },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 标签如何在 script 标签内工作? 的相关文章