从 HTML 头中的变量读取数组值

Question

这是 HTML 结构...

<head>
...
  <script>
     ENV = {...,
         current_user: {
            id: "314",
            display_name: "My name"
                       }
           } 
  <script/>
...
<head/>

我正在尝试读取“display_name”以用于应用程序的另一部分。

如果我在控制台中按 F12 和运行，它会返回名称：

console.log(ENV.current_user.display_name)

但下面的内容在上面的同一页面内不起作用：

<script>
    const x = ENV.current_user.display_name;
    
    document.getElementById("std").innerHTML = x;
</script>
<h3 id="std"></h3>

如何在这个 h3 中打印“我的名字”？

Answer 1

您可以在所有页面中导入全局配置文件（config.js），然后包含其他脚本

<body>
 <h3 id="std"></h3>
 <script src="config.js" />
 <script>
     const x = ENV.current_user.display_name;
    
     document.getElementById("std").innerHTML = x;
 </script>
</body>

并且您的配置文件将包含 ENV 变量。

由于页面加载时间的原因，不应在页眉中声明脚本，始终建议将它们放在 body 标记内的末尾

Answer 2

当您的脚本运行时，您的 std 元素尚未呈现。这应该有效：

<script>
    (function() {
          const x = ENV.current_user.display_name;
          document.getElementById("std").innerHTML = x;
     })();
</script>

放在正文中，正文末尾。

Answer 3

您没有看到名字，因为脚本需要移到正文中。

JavaScript 正在寻找 div 但它返回 NULL，因为您的 JS 在页面加载之前已被调用。

<body>
  <h3 id="std"></h3>
</body>
  <script>
    ENV = {
         current_user: {
            id: "314",
            display_name: "My name"
                       }
           };
    const x = ENV.current_user.display_name;
    
    document.getElementById("std").innerHTML = x;
  </script>

Answer 4

你的

document.getElementById("std").innerHTML = x;

不起作用，因为您的脚本运行在 DOM 完成加载之前，因此它们将 return 为空或未定义。您可以做的是将您的放在 <body></body>

的末尾

这是整个代码的样子：

<head>
    <script>
        ENV = {
            current_user: {
                id: "314",
                display_name: "My name"
            }
        } 
    </script>

</head>
<body>
    <h3 id="std"></h3>

    <script>
        const x = ENV.current_user.display_name;
        document.getElementById("std").innerHTML = x;
    </script>
</body>

确保您的浏览器运行加载 HTML 后的脚本的另一种方法是将 js 脚本分离到不同的文件中，并通过 [= 将其包含在 HTML 中16=]

<script defer src='./filename.js'></script>

单词 defer 告诉浏览器运行 filename.js 仅当 HTML 加载时。

从 HTML 头中的变量读取数组值

Read array value from a variable inside an HTML head

html

javascript

dom

dom-events