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

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

功能测试（）{
document.getElementById（'test'）.innerHTML=“test”；
}

点击这里

仅使用JavaScript无法做到这一点。要点是：JS是一种客户端语言，这意味着它由客户端（浏览器）下载，并由客户端（而不是服务器）运行。为了让这两个页面进行交流，您必须通过某种媒介以某种方式建立交流。介质可以是：

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

因此，如果您对第三个选项感兴趣，您应该阅读关于

window.open

，

window.opener

，

window.parent

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

将打开一个新窗口（比如第二页），并为您带来一个变量

newWindow

，它是对已打开窗口的

窗口

对象的引用。比如说

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

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

var oldWindow = window.opener;

您还可以使用多种方法（

窗口``。关闭

，

移动

，

移动到

，

调整大小

，

调整大小

等）

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

PS为了推进这项技术，您可能需要阅读关于

window.postMessage

的内容，但这主要是为跨域页面之间的通信而设计的

PPS事实上，还有更多

需要注意的一件事是，使用

setItem

方法在

窗口上生成
'storage'
事件（尝试
localStorage.setItem（'key'，'value'）；
和
window.addEventListener（'storage'，event=>console.log（event.key））；
）

另一个，正如安德森·格林所指出的，是（尝试

const channel=newbroadcastChannel（'my_channel'）

，

channel.postMessage（'Hi there！'））

和

channel.addEventListener（'message'，event=>console.log（event））

）

还有和

最后，您可以使用一些现成的解决方案，如、和

---

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

单用JavaScript是做不到的。要点是：JS是一种客户端语言，这意味着它由客户端（浏览器）下载，并由客户端（而不是服务器）运行。为了让这两个页面进行交流，您必须通过某种媒介以某种方式建立交流。介质可以是：

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

因此，如果您对第三个选项感兴趣，您应该阅读关于

window.open

，

window.opener

，

window.parent

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

将打开一个新窗口（比如第二页），并为您带来一个变量

newWindow

，它是对已打开窗口的

窗口

对象的引用。比如说

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

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

var oldWindow = window.opener;

您还可以使用多种方法（

窗口``。关闭

，

移动

，

移动到

，

调整大小

，

调整大小

等）

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

PS为了推进这项技术，您可能需要阅读关于

window.postMessage

的内容，但这主要是为跨域页面之间的通信而设计的

PPS事实上，还有更多

需要注意的一件事是，使用

setItem

方法在

窗口上生成
'storage'
事件（尝试
localStorage.setItem（'key'，'value'）；
和
window.addEventListener（'storage'，event=>console.log（event.key））；
）

另一个，正如安德森·格林所指出的，是（尝试

const channel=newbroadcastChannel（'my_channel'）

，

channel.postMessage（'Hi here！'））<