在 html 页面之间共享变量

Question

首先，我知道这个主题还在 StackOverflow 中，但我还没有完全理解它是如何工作的，阅读现有的答案。 所以，对不起，我希望现在明白了。

我不知道我的方法是否不正确以及为什么会不正确。

我有一个 html 页面，它就像其他几个页面的“遮阳板”，所以从这个“主”页面，我可以看到其他页面将它们嵌入到遮阳板页面的区域（使用 iframe）。

同时，我对所有页面（包括遮阳板）都有一个通用的 .js 文件。

因此，例如，如果我在 .js 中有一个声明为“hello world”（字符串类型）的变量，我可以从 visor 或嵌入页面访问该变量，并且仍然具有其原始值。 但是，如果我从遮阳板（或嵌入式）更改其勇气，则其他页面无法读取从其他页面更改的新勇气。

它可能使全局页间变量？。

我尝试使用 localStorage，但它仅适用于使用它的特定页面。

所以，让我们或多或少地看看：

.JS文件

var Example = "Hello world";

function TellMe()
{
    alert(Example);
}

function ChangeVar()
{
    Example = "Goodbye world";
}

---

第 1 页（当然，在 head 部分中引用了 .js 文件）

<div onclick="ChangeVar();">click!</div>

---

第 2 页（当然，在 head 部分中引用了 .js 文件），但是在单击了第 1 页的 div 之后

<div onclick="TellMe();">click!</div>

这将提醒“Hello World”，而不是“Goodbye World”。

所以我理解每个页面都有自己的 .js 变量版本，即使所有页面都使用相同的 .js，甚至当一个 html 被另一个（嵌入 iframe）访问时。

单击带有消息“再见世界”的第 2 页的 div 后，如何获得此示例？。

---

我会解释得更清楚，看到关于黑客攻击、浪费其他页面和夸大银行账户的答案数量。

它只是一个文档页面（来自软件），我有一个“遮阳板”页面，从中我可以访问其他页面。 实际上，我在根文件夹中有“visor”页面，而在此根目录中的文件夹中的其他页面都在同一个域中，不是吗？

我想要页面上的“下一个”和“上一个”按钮，以避免用户返回遮阳板并选择新页面，但我需要知道用户正在观看的页面编号，了解下一个或上一个显示的页面。

Answer 1

我正在与您分享有关 localstorage 的非常简单的示例，该示例应该可以满足您的要求。 假设您有两个文件 page1.html 和 page2.html。

在 page1.html 中添加以下几行

<div id="notes">
</div>

<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.lastname="Smith";
  document.getElementById("notes").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("notes").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

page2.html 内部

<div id="notes">
</div>

<script>
if(typeof(Storage)!=="undefined" && localStorage.lastname)
  {
  document.getElementById("notes").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("notes").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

您现在可以在任何页面中访问来自 localstorage 的值。

另外一个选项

您可以通过查询字符串参数将值从一个页面传递到另一个页面。 例如。 <a href='page2.html?index=someValue'>goto next page</a>现在在 page2.html 中，您可以通过 javascript 获取此索引值并设置所需字段。

希望能解答您的疑问。

Answer 2

HTML 本地存储应该是您正在寻找的。 这是了解更多信息的链接 - http://diveintohtml5.info/storage.html

您也可以使用window.name称为 JavaScript 会话。 但它只有在使用相同的窗口/选项卡时才有效。 链接 - http://www.thomasfrank.se/sessionvars.html

另外显然还有饼干。

我的偏好顺序是我陈述我的解决方案的顺序。

Answer 3

这里的问题是Javascript的安全问题。

由于CORS问题，即使执行jQuery .load()等简单事件，页面上的其他脚本也不会加载。

Variables在页面之间是不可传递的，尤其是iframes ，因为可能存在各种恶意活动。

我的建议是在您正在进行的每个iframe加载相同的JS文档（如果您能够这样做）。

您将无法将js文件load到不在您的域中的站点。

Answer 4

是的，基本上，你们都是对的。

只需在 localStorage.variableToManipulate 中存储您想要在页面之间操作的变量就足够了。 如果我们想要，直接。

这样就足够了（我将重复我更正的第一个示例）：

.JS文件

localStorage["Example"] = "Hello world";

function TellMe()
{
    alert(localStorage["Example"]);
}

function ChangeVar()
{
    localStorage["Example"] = "Goodbye world";
}

第 1 页（当然，在 head 部分中引用了 .js 文件）

<div onclick="ChangeVar();">click!</div>

第 2 页（当然，在 head 部分中引用了 .js 文件），但是在单击了第 1 页的 div 之后

<div onclick="TellMe();">click!</div>

但是，只是一件事，当您进行此类测试时，请记住只打开一个 html 页面。 我正在测试打开的两个（Visor 和 PageN），我认为每个人都使用自己的 localStorage 变量实例（由自己的页面本身修改）。

只是一个菜鸟愚蠢的错误！。 对不起，非常感谢您的帮助！

Answer 5

我知道现在已经晚了，但是无论谁想在同一域下的页面之间共享数据，他们都可以使用SharedWorker