How to insert arbitrary JSON in HTML's script tag

In HTML, embedding JSON data within the <script> tag is a common practice, especially when preloading data is required in front-end development. This method enables JavaScript to directly access the data without the need for additional AJAX or Fetch requests. Below, I will detail how to do this, providing a specific example.

Steps:

Choose the appropriate location: Typically, placing the JSON data within the <head> tag or before the body content loads is a common approach, ensuring the data is available when JavaScript executes.
Create the <script> tag: In an HTML document, you can add a <script> tag and set the type attribute to "application/json". This informs the browser that the script contains JSON data rather than standard JavaScript code.
Include the JSON data: Place your JSON data directly as the content of the <script> tag. Ensure the JSON format is correct (using double quotes, proper commas, and braces).
Access JSON data from JavaScript: To access this data from JavaScript, you need to set an id attribute on the <script> tag, allowing you to easily locate and read the JSON data using this ID.

Example:

Assume we have some configuration data that we want JavaScript to access immediately upon page load:

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>
        // Access JSON data
        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>

In this example, the JSON data is embedded within a <script> tag of type application/json and has an id attribute, enabling JavaScript to retrieve it via getElementById and parse it using JSON.parse.

The main advantage is that the data is loaded quickly without additional server requests. However, it is important to note that for very large data sets, this may impact page load time. Additionally, there may be security risks, particularly when sensitive information is included in the JSON data. In such cases, it is recommended to use HTTP requests to asynchronously fetch the data, leveraging HTTP security features like HTTPS.

2024年8月16日 02:27 回复

1个答案

Steps:

Example:

你的答案