script type="text/html" 的现代用途是什么？这个例子被认为是好的用途吗？答案

【问题标题】：What are modern uses of script type="text/html" and is this example considered good use?script type="text/html" 的现代用途是什么？这个例子被认为是好的用途吗？
【发布时间】：2012-12-02 17:48:48
【问题描述】：

是不是……

<script type="text/html" id="this-content1">
<h1>This Header Info One</h1>
<p>This content one. . .</p>
</script>
<script type="text/html" id="this-content2">
<h1>This Header Info Two</h1>
<p>This content two. . .</p>
</script>

...并使用 jQuery 根据当今标准中的选择器良好实践来交换内容？

我刚刚开始使用 script type="text/html"... 来允许动态更改我的内容，并且正在寻找许多方法来做到这一点。是否有来源可以解释这一发展方向以及这种做法是否有任何标准化。

我看到类似...的代码

<div class="thumbnail">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( 'image' === data.type ) { #>
                <img src="{{ data.size.url }}" draggable="false" />
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
            <# } #>
        </div>

...嵌套在脚本 type="text/html" 标记中，真的不知道为什么要这样写。也刚刚弄湿了我的喙，如果只是想在一页中添加内容交换，这看起来有点沉重。

【问题讨论】：

您故意将某些内容错误地标记为您非常清楚的可执行代码不是，并询问这是否是一件好事？
在 HTML5 脚本标签中不需要类型属性。
@j08691：如果它们不包含 JavaScript，它们就会这样做。
这对于某些框架或库中的模板很常见，例如 knockout.js knockoutjs.com/documentation/…

标签： javascript css html templates

【解决方案1】：

根据HTML5 spec for the script tag，使用<script> 并将type 属性设置为任何有效的MIME 类型是完全可以的。这包括 MIME 类型，例如 text/html 或 text/plain。

根据HTML4 spec for the script tag，不太好：

"作者可以将两种类型的脚本附加到 HTML document：加载文档时执行一次的那些 [和 t] 每次发生特定事件时执行的软管”

模板不需要骨干。您可以使用例如jQuery 或我个人最喜欢的，Mustache.js。

【讨论】：

我一直在研究 Mustache 和车把，现在您提到了它。根据您的回答，听起来这是执行此类任务的一种现代方式。考虑到 Facebook 还不喜欢 HTML5，也许 Facebook 不像 @JonathanOng 所说的那样不喜欢 HTML5。

【解决方案2】：

我假设您想保存一部分 HTML 以供以后使用。将非脚本数据放在脚本标签中没有意义。做 Facebook 做的事！

<code class="hide" id="code1"><!--
  <p>My HTML here</p>
  <script>My Javascript here</script>
--></code>

然后你可以稍后获取 HTML 并在以后做任何你想做的事情：

var html = document.querySelector('#code1').innerText.slice(5, -5)

在你正确处理它们之前，里面的脚本不会被执行。

一些注意事项：

不知道 innerText 和其他文本函数有什么区别
我认为您不能只将脚本标签插入 DOM。不知道 jQuery 是如何做到的

【讨论】：

应该澄清facebook这样做的真正原因：facebook.com/note.php?note_id=389414033919
谢谢，我刚回到这篇文章，不知出于什么原因，这给了我一些想法。无论哪种方式，我们都关闭了对我们想要隐藏的数据的 html 解释器。我很惊讶没有这样做的标准。
您可以毫无问题地插入脚本标签，实际上 jQuery 有代码可以主动防止这种情况（在 .load() 等函数中）作为安全措施。
将脚本注入 dom 是很常见的，但这个过程通常是通过 XmlHttpRequest 对象完成的。事实上，asp.net webforms 'partial page postbacks' 的 ScriptManager 对象利用了 ajaxify 服务器控件的机制。

【解决方案3】：

这只是为了通过一些服务器端渲染将数据直接嵌入到 HTML

根据 Mozilla - 您还可以通过在 type 属性中指定有效的非 JavaScript MIME 类型，使用该属性将数据嵌入到带有服务器端呈现的 HTML 中。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

例子：

<!-- Generated by the server -->
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

【讨论】：