如何通过 JavaScript 在两个 html 页面之间进行通信？

Question

假设我有两个 html 页面并在两个选项卡中打开它们。 我想让他们交流。 例如，当我单击第一页上的按钮时，它应该调用一个在第二页上执行某些操作的函数。

 function Test() { document.getElementById('test').innerHTML = "Test"; }

 <!DOCTYPE html> <html> <head> <script src="index.js"></script> </head> <body> <button onclick="Test()">Click here</button> </body> </html>

第二页：

 <!DOCTYPE html> <html> <head> <script src="index.js"></script> </head> <body> <p id="test"></p> </body> </html>

当我单击第一页上的按钮时，它应该在第二页的p标记中写入Test 。 它们可以使用相同的 JavaScript 文件。 但我怎样才能做到这一点？

Answer 1

你不能只用 JavaScript 来做到这一点。 重点是：JS 是一种客户端语言，这意味着它由客户端（浏览器）下载并由它（而不是由服务器）运行。 为了让 2 个页面进行通信，您已经通过某种媒介以某种方式建立了通信。 介质可以是：

网络本身。 2个客户端可以直接通信，但前提是他们知道彼此的地址。 他们怎么会得到这些？ 通过服务器的帮助（这将我们带到下面的第二个选项）或通过非常不切实际的手动配置（可以在 WebRTC 的上下文中找到更多详细信息）
你的服务器。 好的，这是最常见的方法，但不仅仅涉及 JS：这需要一种服务器端语言（PHP、Python、C++、Java 等等）
你的浏览器。 有一种特殊情况，您可以建立这样的通信：如果您在同一浏览器中以特殊方式从第一页打开您的第二页，以便第二页“在”第一页的“控制之下”，则您可以“命令”第二个从第一个做一些事情

所以，如果你对第三个选项感兴趣，你应该阅读window.open , window.opener , window.parent 。

var newWindow = window.open(url, name, params);

将打开一个新窗口（比如您的第二页）并为您带来一个变量newWindow ，它是对打开窗口的window对象的引用。 尝试例如

newWindow.write("haha, I'm controlling this stuff!");

同样，在第二个窗口中，您可以使用

var oldWindow = window.opener;

您还可以使用许多方法（ window``.close 、 .moveBy 、 .moveTo 、 .resizeBy 、 .resizeTo等）。

但是请记住，此交互将仅限于您的浏览器：如果您更改浏览器中显示的内容（例如向页面添加一些文本），这不会影响服务器上存储的实际页面，因为这需要您服务器通过一些服务器端脚本做一些事情。

PS 要推进这项技术，您可能需要阅读window.postMessage但这主要是为跨域页面之间的通信而设计的。

PPS 其实，还有更多！

需要注意的一件事是localStorage和sessionStorage有setItem方法，它在window上生成'storage'事件（尝试localStorage.setItem('key', 'value');和window.addEventListener('storage', event => console.log(event.key)); )
另一个，就像安德森格林指出的那样，是广播频道 API （尝试const channel = new BroadcastChannel('my_channel') 、 channel.postMessage('Hi there!')和channel.addEventListener('message', event => console.log(event)) ）。
还有SharedWorker和Service Workers 。
最后，您可以使用一些现成的解决方案，例如tabs-router 、 Hermes 、 Visibility 、 Duel和SE 。

那些说俄语的人也可以在这篇文章中找到更多有用的细节（哇！）。

Answer 2

尝试使用 cookie。 这是我能想到的最简单的方法。 这个网站似乎有帮助： https : //www.w3schools.com/js/js_cookies.asp