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);
    });
  };
  

  高级主题

• 跨域通信: 跨源资源共享（CORS） - HTTP | MDN
• 安全性: Web 安全 | MDN

 

✨ 结语

本章介绍了如何在 JavaScript 中实现跨窗口通信。我们学习了六种常用的跨窗口通信方法：

• window.opener
• window.postMessage
• localStorage
• IndexedDB
• WebRTC
• Broadcast Channel

每种方法都有其优缺点，选择哪种方法取决于具体的应用场景。

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

• 如果需要在父子窗口之间通信，可以使用 window.opener。
• 如果需要在任意窗口或框架之间通信，可以使用 window.postMessage。
• 如果需要共享数据，可以使用 localStorage 或 IndexedDB。
• 如果需要实现实时通信，可以使用 WebRTC。
• 如果需要在多个窗口或框架之间广播消息，可以使用 Broadcast Channel。

本章还提供了一些代码示例，帮助您理解如何使用这些方法。

希望以上内容对您有所帮助。

以下是一些需要进一步学习的主题:

• 跨域通信
• 安全性

​