35

是不是...

<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" 标记中，真的不知道为什么要这样写。也刚刚在骨干上弄湿了我的喙，如果只是想在一页中添加内容交换，这看起来有点沉重。

4

3 回答 3

24

根据script 标签的 HTML5 规范，与设置为任何有效 MIME 类型<script>的属性一起使用是完全可以的。type这包括 MIME 类型，如text/htmlor text/plain。

根据script 标签的 HTML4 规范，它不太好：

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

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

于 2012-12-14T21:11:01.600 回答
3

我假设您想保存一部分 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 是如何做到的
于 2012-12-14T21:14:42.497 回答
1

这只是为了通过一些服务器端渲染将数据直接嵌入到 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>
于 2020-07-18T20:41:37.050 回答