在网页开发过程中，我们经常会把JavaScript代码单独写在外部文件中，然后在HTML页面里引入使用，但不少开发者会遇到无法在HTML里调用JavaScript文件中定义的变量的问题，这往往和脚本加载顺序、变量作用域等因素相关。
变量无法使用常见原因
首先要明确为什么会出现变量无法调用的情况，最常见的原因有两个：
- 脚本加载顺序错误：HTML解析时先执行了调用变量的代码，此时JavaScript文件还没加载完成，变量还未定义。
- 变量作用域问题：JavaScript文件里的变量定义在函数内部，属于局部变量，无法在全局作用域被HTML中的代码访问。
正确使用变量的方法
方法一：调整脚本引入位置
把外部JavaScript文件的引入标签放在HTML页面的底部，也就是<body>标签的结束位置之前，这样HTML解析到调用变量的代码时，JavaScript文件已经加载完成，变量已经定义。
示例的JavaScript文件test.js内容如下：
// 定义全局变量 var userName = "张三"; let userAge = 25; const userCity = "北京";
对应的HTML文件内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>变量使用示例</title>
</head>
<body>
<div id="userInfo"></div>
<script>
// 此时test.js已经加载完成，变量可以正常使用
document.getElementById("userInfo").innerText = `姓名：${userName}，年龄：${userAge}，城市：${userCity}`;
</script>
<!-- 外部JS文件放在底部引入 -->
<script src="test.js"></script>
</body>
</html>
方法二：使用全局作用域定义变量
如果需要在HTML的不同位置调用变量，要确保变量定义在全局作用域，不要放在函数内部。在浏览器环境中，直接在最外层定义的var变量、let和const变量（非函数内）都属于全局作用域，可以被其他脚本访问。
如果变量必须定义在函数内部，可以将其挂载到window对象上，变成全局属性：
function initData() {
// 把变量挂载到window对象，变成全局可访问
window.productName = "笔记本电脑";
window.productPrice = 4999;
}
// 调用函数初始化数据
initData();
HTML中调用方式：
<script>
console.log(window.productName); // 输出：笔记本电脑
console.log(productPrice); // 输出：4999，window属性可以省略window前缀
</script>
方法三：通过事件触发获取变量
如果不确定JavaScript文件什么时候加载完成，可以通过监听DOMContentLoaded事件，等整个页面DOM加载完成后再执行调用变量的代码，避免加载顺序问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件触发示例</title>
<script src="test.js"></script>
</head>
<body>
<div id="content"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 页面DOM加载完成后执行，此时test.js已经加载
document.getElementById("content").innerText = userName;
});
</script>
</body>
</html>
注意事项
- 不要使用
var之外的变量声明方式在全局作用域声明变量时，避免块级作用域的影响，如果需要在严格模式下使用，优先选择挂载到window对象的方式。 - 如果多个JavaScript文件都定义了同名全局变量，后面的文件会覆盖前面的变量值，要注意变量命名避免冲突。
- 使用模块化开发的场景（比如ES6 Module），外部文件需要通过
export导出变量，HTML中通过import引入，此时script标签需要添加type="module"属性。
注意：如果是在本地直接打开HTML文件测试，部分浏览器会因为跨域策略限制无法加载本地JavaScript文件，建议通过本地服务器运行测试。
JavaScriptHTML变量script_标签修改时间：2026-07-04 21:57:24