如何跨HTML页面读取另一页面内联脚本声明的变量

这个需求无法直接实现，但可以借助浏览器提供的跨页面通信、存储能力间接完成。

为什么不能直接访问？ #

每个HTML页面被加载时，浏览器都会为它创建独立的JavaScript执行上下文。abc.html内联脚本里声明的变量x，只存在于abc.html自身的全局作用域中，一旦页面跳转、关闭，这个上下文就会被销毁，和rst.html的执行上下文完全隔离，不存在原生的直接变量共享通道。

可落地的间接实现方案 #

你可以根据两个页面的打开关系、所属域名选择适配的方案：

• 方案1：URL参数传递（适合从abc.html主动跳转到rst.html的单标签页场景）
  跳转时把x的值拼接到目标URL的查询参数中，在rst.html加载时解析URL参数就能拿到值。
  参考代码：

  // abc.html 中的跳转逻辑
  const x = "你的变量实际值";
  location.href = `rst.html?x=${encodeURIComponent(x)}`;
  
  // rst.html 中的取值逻辑
  const searchParams = new URLSearchParams(location.search);
  const x = searchParams.get("x");
  

• 方案2：Web存储共享（适合两个页面同属一个域名的场景，无严格跳转顺序要求）
  同源页面可以共享localStorage或sessionStorage的存储空间，在abc.html里把x写入存储，rst.html加载时直接读取即可。
  参考代码：

  // abc.html 中写入存储
  const x = "你的变量实际值";
  localStorage.setItem("sharedX", x);
  
  // rst.html 中读取存储
  const x = localStorage.getItem("sharedX");
  

  注意：sessionStorage是单标签页级别的临时存储，只有在同一个标签页内跳转时才能跨页面读到值，关闭标签页就会清空；localStorage是持久化存储，同域下多个标签页也能共享数据，除非手动清除否则会长期保留。

• 方案3：postMessage通信（适合两个页面存在窗口引用关系的场景，支持跨域）
  如果abc.html是通过iframe嵌入rst.html，或者通过window.open打开的rst.html，两个页面持有对方的窗口引用，就可以直接用postMessage接口主动推送x的值，接收方做好源校验即可避免安全风险。

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