如何在一个JS文件中访问另一个JS文件的变量？

兄弟，你现在的代码问题出在动态加载脚本是异步的——你刚把script标签加到页面上，浏览器还没来得及下载并执行file2.js，就立刻去打印message，这时候这个变量根本还没被定义，自然会报错啦。不过放心，跨JS文件访问变量完全是可以实现的，下面给你几种靠谱的解决方案：

方案一：监听脚本加载完成事件（适配传统非模块场景） #

动态加载的script是异步执行的，你需要等它加载并执行完毕后，再去访问里面的变量。通过监听load事件就能精准把握时机：

修改你的file1.js：

oScript = document.createElement('script');
oScript.src = 'file2.js';
oScript.type = 'text/javascript';
// 监听脚本加载完成事件，确保变量已被定义
oScript.addEventListener('load', function() {
    console.log(message);
});
document.body.appendChild(oScript);

你的file2.js不需要修改，因为非模块环境下var message会自动挂载到全局作用域（window对象），加载完成后就能直接访问。

方案二：使用ES6模块（推荐，更规范清晰） #

如果你的项目支持ES6模块，这是更现代、更易维护的方式：

1. 先修改file2.js，把变量导出：

export const message = [{"id":"01", "name":"Text A", "text":"more text"},{"id":"02", "name":"Text B", "text":"more text"}];

2. 在file1.js里用动态import适配你当前的动态加载场景：

import('./file2.js').then(module => {
    console.log(module.message);
});

如果是静态加载的场景，只要在HTML里给script标签加上type="module"，然后直接静态导入即可：

<script type="module" src="file1.js"></script>

file1.js里写：

import { message } from './file2.js';
console.log(message);

方案三：手动挂载全局变量（不推荐，仅兼容旧环境） #

如果你需要兼容非常老旧的环境，也可以把变量明确挂载到window对象上（但这种方式会污染全局作用域，尽量少用）：

修改file2.js：

window.message = [{"id":"01", "name":"Text A", "text":"more text"},{"id":"02", "name":"Text B", "text":"more text"}];

不过就算这样，还是推荐用方案一的load事件来确保变量已加载，而不是盲目用setTimeout轮询，后者可靠性很差。

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