在不同的 HTML 文件中的内联 JavaScript 脚本之间共享变量是一个常见的问题，初学者经常会遇到。 假设我们有两个 HTML 文件，abc.html 和 rst.html，abc.html 中有一个内联脚本，声明了一个变量 x 并赋予了某个值。现在，我们希望在 rst.html 文件的内联脚本中访问 x 的值。 这种方法直接访问是不可行的。
原因：浏览器的安全限制
JavaScript 无法直接访问其他标签页或窗口中的变量。 虽然你可以访问 <iframe> 元素（它可能位于单独的窗口中），但浏览器通常会阻止这种访问，以确保安全性。 每个浏览器窗口都有自己的一组全局变量。出于安全考虑，无法直接访问其他窗口的变量。
替代方案：使用 AJAX (不推荐)
立即学习“前端免费学习笔记（深入）”；
理论上，你可以使用 AJAX 读取第二个文件，然后搜索变量并获取其值。但是，这种方法非常复杂，并且效率低下，不建议使用。
推荐方案：使用独立的 JavaScript 文件
最简单且最有效的方法是创建一个独立的 JavaScript 文件，例如 x.js，并在两个 HTML 文件中加载它。
步骤：
-
创建 x.js 文件:
在 x.js 文件中，定义你想要共享的变量：
let x = 10; // 你的变量和值
-
在 abc.html 中引入 x.js:
<!DOCTYPE html> <html> <head> <title>abc.html</title> </head> <body> <h1>abc.html</h1> <script src="x.js"></script> <script> console.log("abc.html: x = " + x); // 输出: abc.html: x = 10 </script> </body> </html> -
在 rst.html 中引入 x.js:
<!DOCTYPE html> <html> <head> <title>rst.html</title> </head> <body> <h1>rst.html</h1> <script src="x.js"></script> <script> console.log("rst.html: x = " + x); // 输出: rst.html: x = 10 </script> </body> </html>
注意事项：
- 确保 x.js 文件的路径在 src 属性中正确指定。
- 在 HTML 文件中引入 x.js 的 <script> 标签必须在任何使用 x 变量的内联脚本之前。
- 如果变量 x 需要在运行时动态更新，确保更新后的值在所有需要访问它的脚本中都可用。
总结：
虽然直接在不同 HTML 文件的内联脚本之间共享变量不可行，但通过使用独立的 JavaScript 文件，可以轻松实现变量共享。 这种方法简单、高效，并且符合浏览器的安全策略。 避免使用复杂的 AJAX 方法，而是选择更清晰、更易于维护的解决方案。
