javascript - 是否有在 HTML 中嵌入 JSON 的标准？

Question

我想在 HTML 中嵌入 JSON。我发现的最优雅的解决方案是使用 script 标签和 mime 媒体类型 application/json。

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script> 

这是嵌入 JSON 的标准方式吗？如果没有，上述方案是否存在风险？

使用内联 JSON(而不是 JSON-P 服务)的原因:

• 少量 JSON 数据
• 更少的 HTTP 请求
• 内联 JSON 优先于 HTML 属性中的数据

[更新]嵌入 json 的原因。

我有一个用于流量非常高的网站的图库小部件。图库可以包含 100 张或更多图片。我一次只显示一张图片，其余图片将延迟加载。但是，所有图像的信息(图像 src)将在页面加载时呈现在 html 中。有多种方法可以在 html 中呈现图像信息。除了使用 JSON，我还可以使用 html 数据属性，如下所示:

<li class="image" data-src="image-path.jpg">
    <!-- image tag will be created here using javascript -->
</li>

将导致:

<li class="image image-loaded" data-src="image-path.jpg">
    <img src="image-path.jpg" />
</li>

上述解决方案的缺点是额外的标记。我宁愿使用 JSON 和 Javascript 模板引擎，例如 doT.js .

Answer 1

您的建议是绝对正确的。 script 标记的 type 属性必须是有效的 MIME 描述符。根据the official JSON RFC第 6 节“IANA 考虑”:

The MIME media type for JSON text is application/json.
Type name: application
Subtype name: json

所以你的 HTML 是有效的:

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script> 

而且，不，这样做不会涉及额外的风险。