如何在不同 HTML 文件的内联脚本间共享变量-html教程-PHP中文网

如何在不同 HTML 文件的内联脚本间共享变量

花韻仙語

发布： 2025-09-25 16:32:01

原创

543人浏览过

如何在不同 html 文件的内联脚本间共享变量

在不同的 HTML 文件中的内联 JavaScript 脚本之间共享变量是一个常见的问题，初学者经常会遇到。假设我们有两个 HTML 文件，abc.html 和 rst.html，abc.html 中有一个内联脚本，声明了一个变量 x 并赋予了某个值。现在，我们希望在 rst.html 文件的内联脚本中访问 x 的值。这种方法直接访问是不可行的。

原因：浏览器的安全限制

JavaScript 无法直接访问其他标签页或窗口中的变量。虽然你可以访问 <iframe> 元素（它可能位于单独的窗口中），但浏览器通常会阻止这种访问，以确保安全性。每个浏览器窗口都有自己的一组全局变量。出于安全考虑，无法直接访问其他窗口的变量。

替代方案：使用 AJAX (不推荐)

立即学习“前端免费学习笔记（深入）”；

理论上，你可以使用 AJAX 读取第二个文件，然后搜索变量并获取其值。但是，这种方法非常复杂，并且效率低下，不建议使用。

推荐方案：使用独立的 JavaScript 文件

最简单且最有效的方法是创建一个独立的 JavaScript 文件，例如 x.js，并在两个 HTML 文件中加载它。

步骤：

美间AI

美间AI：让设计更简单

查看详情

创建 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>

登录后复制

注意事项：