在HTML中使用 `<script>` 标签插入JSON数据是一种常见的做法，尤其是在前端开发中需要预加载一些数据时。这种做法可以让JavaScript直接访问这些数据，而不需额外的AJAX或Fetch请求。下面我将详细说明如何操作，并给出一个具体的示例。

### 步骤：

1. **选择合适的位置**：
   一般来说，将JSON数据放在 `<head>` 标签中或页面内容加载前是比较常见的做法，这样可以确保在JavaScript脚本运行时数据已经可用。

2. **创建 `<script>` 标签**：
   在HTML文档中，你可以添加一个 `<script>` 标签，并设置 `type` 属性为 "application/json"。这告诉浏览器这段脚本包含的是JSON数据，而不是常规的JavaScript代码。

3. **填充JSON数据**：
   将你的JSON数据直接作为 `<script>` 标签的内容。确保JSON格式正确（使用双引号，正确的逗号和花括号等）。

4. **从JavaScript访问JSON数据**：
   为了从JavaScript访问这些数据，你需要给 `<script>` 标签设置一个 `id` 属性，这样可以通过这个ID来方便地定位并读取这个JSON数据。

### 示例：

假设我们有一些配置数据，我们希望在页面加载时就让JavaScript可以访问这些数据：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script id="configData" type="application/json">
        {
            "apiUrl": "https://api.example.com",
            "apiKey": "abc123",
            "maxItems": 50
        }
    </script>
</head>
<body>
    <h1>Welcome to Our Page</h1>

    <script>
        // 访问JSON数据
        const configScript = document.getElementById('configData');
        const config = JSON.parse(configScript.textContent);

        console.log("API URL:", config.apiUrl);
        console.log("API Key:", config.apiKey);
        console.log("Max Items:", config.maxItems);
    </script>
</body>
</html>
```

在这个示例中，JSON数据被包含在一个类型为 `application/json` 的 `<script>` 标签中，并且它具有一个 `id`，方便JavaScript通过 `getElementById` 获取这段内容，并使用 `JSON.parse` 解析JSON数据。

这种方法的优点是数据加载很快，不需要额外的服务器请求。但是，需要注意的是，如果数据量非常大，这可能会影响到页面的加载时间。另外，这种做法也可能有一定的安全风险，尤其是当JSON数据中包含敏感信息时。在这种情况下，最好使用HTTP请求来异步获取数据，这样可以利用HTTP的安全特性（如HTTPS）。

How to insert arbitrary JSON in HTML's script tag

1个答案

步骤：

示例：

你的答案