JavaScript 跨窗口通信（Cross-Window Communication）

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

在现代 Web 开发中，跨窗口通信是一种常见需求。它允许在不同的窗口或框架之间传递数据和消息，从而实现各种功能。

本章将介绍如何在 JavaScript 中实现跨窗口通信。我们将学习以下内容：

跨窗口通信的常见场景
跨窗口通信的不同方法
每种方法的优缺点
如何选择合适的跨窗口通信方法

✨ 正文

在现代浏览器中，出于安全考虑，同源策略限制了不同窗口或框架之间直接访问彼此的 DOM 和 JavaScript 对象。跨窗口通信是指在不同窗口或框架之间传递数据和消息的技术。

跨窗口通信的常见场景:

在不同的窗口或框架之间共享数据
在不同的窗口或框架之间触发事件
在不同的窗口或框架之间控制彼此的行为

跨窗口通信的方法:

Window.opener
Window.postMessage
Local Storage
IndexedDB
WebRTC

Window.opener

简介

window.opener 属性允许从一个窗口访问打开它的窗口。

示例:

// 在新窗口中打开一个页面
var newWindow = window.open('https://www.baidu.com', '_blank');// 在新窗口中获取打开它的窗口
var openerWindow = newWindow.opener;// 在新窗口中向打开它的窗口发送消息
openerWindow.postMessage('Hello from the new window!');

缺点:

仅限于父子窗口之间通信
依赖于打开窗口的页面仍然存在

Window.postMessage

简介

window.postMessage() 方法允许在不同窗口或框架之间安全地传递消息。

示例:

// 在第一个窗口中发送消息
window.postMessage('Hello from the first window!', '*');// 在第二个窗口中接收消息
window.addEventListener('message', function(event) {console.log('Received message:', event.data);
});

参数:

message: 要发送的数据
targetOrigin: 目标窗口的源（可选）

优点:

可以在任意窗口或框架之间通信
不依赖于任何特定的页面或窗口

缺点:

无法直接访问对方的 DOM 或 JavaScript 对象

Local Storage

简介

localStorage 对象允许在浏览器中存储数据，即使关闭窗口或浏览器也不会丢失。

示例:

// 在第一个窗口中存储数据
localStorage.setItem('key', 'value');// 在第二个窗口中读取数据
var value = localStorage.getItem('key');

优点:

可以在任意窗口或框架之间共享数据
数据持久化

缺点:

存储空间有限
无法存储复杂的数据结构

IndexedDB

简介

IndexedDB 是一个 NoSQL 数据库，允许在浏览器中存储大量数据。

示例:

// 在第一个窗口中打开数据库
var db = indexedDB.open('my-database');// 在第一个窗口中存储数据
db.onsuccess = function(event) {var objectStore = db.result.createObjectStore('my-object-store');objectStore.add({key: 'key', value: 'value'});
};// 在第二个窗口中读取数据
var db = indexedDB.open('my-database');db.onsuccess = function(event) {var objectStore = db.result.createObjectStore('my-object-store');objectStore.get('key').onsuccess = function(event) {console.log('Received value:', event.target.result.value);};
};

优点:

可以存储大量数据
可以存储复杂的数据结构

缺点:

使用起来比较复杂

WebRTC

简介

WebRTC 允许在浏览器之间建立实时通信。

示例:

// 在第一个窗口中建立连接
var peerConnection = new RTCPeerConnection();// 在第二个窗口中接受连接
var peerConnection = new RTCPeerConnection();// 在第一个窗口中发送数据
peerConnection.ondatachannel = function(event) {var dataChannel = event.channel;dataChannel.onmessage = function(event) {console.log('Received message:', event.data);};
};// 在第二个窗口中发送数据
var dataChannel = peerConnection.createDataChannel('my-channel');
dataChannel.send('Hello from the second window!');

优点:

可以实现实时通信
可以传输任意类型的数据

缺点:

使用起来比较复杂

总结

跨窗口通信是 Web 开发中常见需求，有多种方法可以实现。每种方法都有其优缺点，选择哪种方法取决于具体的应用场景。

以下是一些选择跨窗口通信方法的建议:

如果需要在父子窗口之间通信，可以使用 window.opener。
如果需要在任意窗口或框架之间通信，可以使用 window.postMessage()。
如果需要共享数据，可以使用 localStorage 或 IndexedDB。
如果需要实现实时通信，可以使用 WebRTC。

参考资料

JavaScript 教程 - 跨窗口通信: 跨窗口通信
MDN Web Docs - 跨窗口通信: <移除了无效网址>

附加内容

代码示例

以下是一些更复杂的跨窗口通信示例:

使用 window.postMessage() 在两个窗口之间传递对象:

// 在第一个窗口中发送对象
var obj = {name: 'John Doe',age: 30
};
window.postMessage(obj, '*');// 在第二个窗口中接收对象
window.addEventListener('message', function(event) {var obj = event.data;console.log('Received object:', obj);
});

使用 localStorage 在多个窗口之间共享购物车:

// 在第一个窗口中添加商品到购物车
localStorage.setItem('cart', JSON.stringify([{name: 'Product A', price: 100}]));// 在第二个窗口中查看购物车
var cart = JSON.parse(localStorage.getItem('cart'));
console.log('Cart:', cart);

使用 IndexedDB 在多个窗口之间存储联系人信息:

// 在第一个窗口中存储联系人信息
var db = indexedDB.open('my-database');db.onsuccess = function(event) {var objectStore = db.result.createObjectStore('my-object-store');objectStore.add({name: 'John Doe', phone: '123-456-7890'});
};// 在第二个窗口中读取联系人信息
var db = indexedDB.open('my-database');db.onsuccess = function(event) {var objectStore = db.result.createObjectStore('my-object-store');objectStore.get('John Doe').onsuccess = function(event) {console.log('Received contact:', event.target.result);};
};

使用 WebRTC 在两个窗口之间进行视频通话:

// 在第一个窗口中建立连接
var peerConnection = new RTCPeerConnection();// 在第二个窗口中接受连接
var peerConnection = new RTCPeerConnection();// 在第一个窗口中获取本地视频流
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {var videoElement = document.getElementById('video');videoElement.srcObject = stream;// 将本地视频流添加到连接中peerConnection.addStream(stream);
});// 在第二个窗口中播放远程视频流
peerConnection.ondatachannel = function(event) {var dataChannel = event.channel;dataChannel.onmessage = function(event) {var videoElement = document.getElementById('video');videoElement.srcObject = new MediaStream(event.data);};
};// 在第一个窗口中发送视频流
peerConnection.createOffer().then(function(offer) {peerConnection.setLocalDescription(offer);peerConnection.sendOffer(offer);
});// 在第二个窗口中接受视频流
peerConnection.onicecandidate = function(event) {if (event.candidate) {peerConnection.addIceCandidate(event.candidate);}
};peerConnection.onnegotiationneeded = function() {peerConnection.createAnswer().then(function(answer) {peerConnection.setLocalDescription(answer);peerConnection.sendAnswer(answer);});
};