logo标签列表

在HTML页面之间共享变量

javascripthtmlvariables
5
首先，我知道这个主题在StackOverflow上已经存在，但是我没有完全理解现有答案的工作原理。所以，很抱歉，我希望现在能够理解。
我不知道我的方法是否不正确，以及为什么会不正确。
我有一个HTML页面，充当其他几个页面的“观察者”，因此从这个“主”页面，我可以通过将它们嵌入到观察者页面的区域中（使用iframe）来查看其他页面。
同时，我有一个通用的.js文件，适用于所有页面（包括观察者）。
例如，如果我在.js中声明了一个变量，并将其值设置为“hello world”（字符串类型），我可以从观察者或嵌入的页面访问此变量，并仍然具有其原始值。但是，如果我从观察者（或嵌入）更改其值，则其他页面无法读取从其他页面更改后的新值。
是否可能创建一个在多个页面之间都可见的全局变量？
我尝试使用localStorage，但它仅适用于使用它的特定页面。
因此，让我们大致看一下：

.JS文件

var Example = "Hello world";

function TellMe()
{
    alert(Example);
}

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

第1页（当然要在头部引用.js文件）

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

在引用的 .js 文件被放置在头部之后，进入第二页（当然是在点击第一页的 div 之后）。
<div onclick="TellMe();">click!</div>

这会弹出"Hello World"，而不是"Goodbye World"。

因此，我了解到每个页面都有自己的.js变量版本，即使所有页面都使用相同的.js，并且即使一个HTML从另一个HTML中访问（嵌入iframe）。

如何在单击页面2的div后获得此示例，其中显示消息"Goodbye World"？

看到许多答案提到破解、浪费其他页面和增加银行账户的数量，我将更加详细地解释一下。

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

我想在页面上放置“下一页”和“上一页”按钮，以避免用户返回到visor并选择新页面，但我需要知道用户正在观看的页面编号，以便知道下一页或上一页应该显示哪个页面。

1
您选择的问题标签（“html页面之间的变量”）可能不会对您有所帮助。然而，“html变量”可能已经足够了。（也就是说，“之间”不是一个好的主题名称。） - Richard
1
好的 Richard，谢谢你的建议。 - Reaversword
1
localStorage 可以 在多个页面之间保持持久化（如果不起作用，那么您可能做错了）：“来自您域的所有页面共享相同的存储区域，因此您可以使用此机制在多个页面之间保持数据持久性。 数据还会留在客户端机器上（直到您将其删除），因此它可用于随时间跟踪信息。” - user2864740
1
（我不是在宣传localStorage在这里是一个“好”的方法，但它可以在支持的环境中使用。） - user2864740
2
可能是在HTML页面之间共享数据的重复问题。 - Muhammad Usman
显示剩余2条评论
5个回答
6

我将与您分享一个非常简单的关于本地存储的示例，它可以满足您的需求。 假设您有两个文件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'>转到下一页</a>。现在在page2.html中，您可以获取此索引值并通过JavaScript设置所需的字段。
希望这回答了您的问题。
这个解决方案只有在 page1.html 和 page2.html 在同一个域名下才能生效。但是还有其他方法可以在不同域名的页面之间共享变量（例如使用带有 postMessage 的 iframe）。 - Anderson Green
2

HTML本地存储（Local Storage）可能是您正在寻找的解决方案。以下是了解更多信息的链接- http://diveintohtml5.info/storage.html

此外，您还可以使用JavaScript会话中已知的window.name，但仅在使用相同的窗口/选项卡时才有效。链接- http://www.thomasfrank.se/sessionvars.html

当然还有cookies。

按照我列出的解决方案顺序，我的首选顺序如下。

1

是的，基本上，你们所有人都是正确的。

只需将要操作的变量存储在localStorage.variableToManipulate中，在页面之间传递即可。如果需要，可以直接进行操作。

因此，只需要类似以下代码（我会重复我的第一个示例并进行更正）：

.JS文件

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

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

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

第一页（当然在头部引用了.js文件）

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

在页面1的div被点击之后，位于部分引用了.js文件的页面2。
<div onclick="TellMe();">click!</div>

但是，需要注意的一点是，在进行这种测试时，请确保只打开了一个html页面。我当时在测试时打开了两个页面（Visor和PageN），我认为每个页面都在使用自己的localStorage变量实例（由页面本身修改）。
仅仅是一个新手愚蠢的错误！非常抱歉，并非常感谢你能伸出援手！
1

这里的问题涉及到Javascript安全性问题。

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

变量不能在页面之间传递，特别是在iframes中，因为可能存在各种恶意活动。

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

您将无法向不属于您域的站点加载js文件。

1
有什么办法阻止我注入一个JS文件，使我的银行账户余额变成100万美元？;-) - Nicholas Hazel
1
我在根目录上有面罩，页面在一个文件夹中，这对于使localStorage工作是否会有障碍？ - Reaversword
1
我不认为有任何理由不这样做 :-) 只要一切都是本地的，请查看此链接以了解更多信息。 - Nicholas Hazel
0

我知道现在有点晚了，但是想要在同一域名下的页面之间共享数据的人可以利用SharedWorker。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接