如何从外部JavaScript文件访问HTML文档内定义的变量？

嘿，我来帮你搞定这两个关于JS变量访问的问题，都是前端开发里很常见的场景～

问题1：通用思路说明 #

要从外部JS文件访问HTML里定义的变量，核心在于变量的作用域和脚本的加载顺序：

• 首先，HTML里的变量必须是全局作用域的：不能定义在函数、块级作用域（比如{}包裹的代码）或者闭包内，必须直接暴露在全局环境中（用var定义的全局变量会自动挂载到window对象上；用let/const定义的全局变量虽不会成为window的属性，但依然能在全局作用域内被访问）。
• 其次，外部JS文件的加载顺序必须在定义变量的<script>标签之后：如果外部JS先加载执行，此时HTML里的变量还没被初始化，自然会出现访问不到的情况。

问题2：针对你的示例代码的具体解法 #

先看你给出的示例HTML：

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="icon" href="https://www.example.com/icon.png">
<title>Exsample</title>
</head>
<body>
<script>
var example = "example"
</script>
</body>

这里的example变量是直接定义在全局作用域的，要在外部JS里访问它，只需要调整外部JS的加载位置即可：

步骤1：修改HTML，调整外部JS的加载顺序 #

把引入外部JS的<script>标签放在定义example的<script>标签之后，确保变量已经完成初始化：

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="icon" href="https://www.example.com/icon.png">
<title>Example</title>
</head>
<body>
<script>
var example = "example"
</script>
<!-- 外部JS放在这里，保证变量已定义 -->
<script src="path/to/your-external-script.js"></script>
</body>

步骤2：在外部JS文件中直接访问变量 #

在你的外部JS文件（比如your-external-script.js）里，直接使用example变量就可以了：

// your-external-script.js
console.log(example); // 输出: "example"
// 也可以通过window对象访问（var定义的全局变量会挂载到window）
console.log(window.example); // 同样输出: "example"

额外注意事项 #

• 如果是用let或const定义的全局变量（比如let example = "example"），虽然不会成为window的属性，但只要是在全局作用域定义，且外部JS在之后加载，依然能直接访问。
• 实际项目里尽量少用全局变量，容易引发命名冲突。更推荐用ES6模块（通过import/export）或者把变量封装在自定义的命名空间里，比如：

  // HTML里的脚本
  window.MyApp = {
    example: "example"
  };
  // 外部JS里访问
  console.log(MyApp.example);
  

内容的提问来源于stack exchange，提问作者T54