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

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

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

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

  • 跨域通信
  • 安全性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2774619.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

怎么看待梅西?回家第一天,谢谢自己!新村主任!——早读

回家第一天 引言代码第一篇 平安中原 一图读懂 | 2024年全省公安局处长会议第二篇 人民日报 【夜读】这一年&#xff0c;谢谢自己第三篇 人民日报 来了&#xff01;新闻早班车要闻社会政策 结尾 引言 今天爬的很晚&#xff0c;没想到新闻早班车也排的那么低 回家第一天 昨天出去…

代码随想录算法训练营DAY16 | 二叉树 (3)

一、LeetCode 104 二叉树的最大深度 题目链接&#xff1a;104.二叉树的最大深度https://leetcode.cn/problems/maximum-depth-of-binary-tree/ 思路&#xff1a;采用后序遍历递归求解。 class Solution {int ans 0;public int maxDepth(TreeNode root) {if(root null){retur…

猫头虎分享已解决Bug ‍ || ValueError: Found array with dim 3. Estimator expected <= 2

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

嵌入式学习之Linux入门篇笔记——15,Linux编写第一个自己的命令

配套视频学习链接&#xff1a;http://【【北京迅为】嵌入式学习之Linux入门篇】 https://www.bilibili.com/video/BV1M7411m7wT/?p4&share_sourcecopy_web&vd_sourcea0ef2c4953d33a9260910aaea45eaec8 1.什么是命令&#xff1f; 命令就是可执行程序。 比如 ls -a…

armbian ddns

参考https://mp.weixin.qq.com/s/0Uu_nbGH_W6vAYHPH4kHqg Releases jeessy2/ddns-go GitHub mkdir -p /usr/local/ddns-go cd /usr/local/ddns-gowget https://github.com/jeessy2/ddns-go/releases/download/v6.1.1/ddns-go_6.1.1_freebsd_armv7.tar.gztar zxvf ddns-go_…

用友U8+OA doUpload.jsp 文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

mac电脑flutter环境配置,解决疑难问题

准备工作 首先搭建flutter的环境需要使用到flutter的sdk&#xff0c;可以直接跳去官网下载&#xff1a;Choose your first type of app - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter&#xff0c;下载时要注意你电脑所使用的芯片是Intel的还是苹果的芯片。 下载好的…

(C++)集合数据文件存储工具

前言 一个简单的实现简便 "map集合" 数据存储本地。 适合不会SQL但又想实现数据存储本地的同学。 操作使用都非常简单。 文件只做了简单的加密处理&#xff0c;如果需要复杂加密的同学可以修改加密函数。 项目结构 1.创建头文件——CAB.h // // Created by xw o…

【lesson47】进程通信之system V(共享内存)补充知识

文章目录 补充知识 补充知识 进行通信的key值问题&#xff0c;进程要通信的对方进程怎么能保证对方能看到&#xff0c;并且看到的就是该进程创建的共享内存的。 所以就通过key值来标识共享内存&#xff0c;key值是几不重要&#xff0c;只要在系统里是唯一的即可。 这样server和…

【动态规划】【前缀和】【数学】2338. 统计理想数组的数目

作者推荐 【动态规划】【前缀和】【C算法】LCP 57. 打地鼠 本文涉及知识点 动态规划汇总 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LeetCode:2338. 统计理想数组的数目 给你两个整数 n 和 maxValue &#xff0c;用于描述一个 理想…

React环境配置

1.安装Node.js Node.js官网&#xff1a;https://nodejs.org/en/ 下载之后按默认选项安装好 重启电脑即可自动完成配置 2.安装React 国内使用 npm 速度很慢&#xff0c;可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。 ①使用 winR 输入 cmd 打开终端 ②依…

JAVA结课作品——超市管理系统

项目描述&#xff1a;一个简单的超市管理系统&#xff0c;能够实现用户登入和注册功能&#xff0c;共分为前台和后台两个主要界面&#xff0c;普通用户界面操作权限收到限制&#xff0c;只能对商品和销售记录进行简单查询操作&#xff0c;后台中可以进行商品的删除、修改、查询…

如何使用Docker本地部署一个开源网址导航页并分享好友公网使用

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…

PHP入门指南:进阶篇

PHP入门指南&#xff1a;进阶篇 PHP入门指南&#xff1a;进阶篇1. 面向对象编程&#xff08;OOP&#xff09;1.1 类和对象的基本概念1.2 构造函数和析构函数1.3 属性和方法的访问控制1.4 继承与多态 2. 错误和异常处理2.1 错误处理机制2.2 异常处理机制2.3 自定义异常类 3. PHP…

【GAMES101】Lecture 19 相机

目录 相机 视场 Field of View (FOV) 曝光&#xff08;Exposure&#xff09; 感光度&#xff08;ISO&#xff09; 光圈 快门 相机 成像可以通过我们之前学过的光栅化成像和光线追踪成像来渲染合成&#xff0c;也可以用相机拍摄成像 今天就来学习一下相机是如何成像的…

NeRF从入门到放弃1:原理介绍

基本概念 原始的论文中所介绍的NeRF&#xff08;NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis&#xff0c;用神经辐射场表示场景进行视角合成&#xff09;&#xff0c;是神经辐射场以及体积渲染技术的结合&#xff0c;即用神经辐射场隐式地表示场…

代码随想录算法训练营第29天|491.递增子序列 * * 46.全排列 * 47.全排列 II

文章目录 491.递增子序列思路&#xff1a;代码 思路&#xff1a;优化代码&#xff1a; 46.全排列思路代码一&#xff1a;使用used数组代码二&#xff1a;使用path判断元素 47.全排列 II思路一&#xff1a;层节点和路径都是用used数组做记录思路二&#xff1a;层通过排序后是否重…

【第二届 Runway短视频创作大赛】——截至日期2024年03月01日

短视频创作大赛 关于AI Fil&#xff4d; Festival竞赛概况参加资格报名期间报名方法 提交要求奖品附录 关于AI Fil&#xff4d; Festival 2022年成立的AIFF是一个融合了最新AI技术于电影制作中的艺术和艺术家节日&#xff0c;让我们得以一窥新创意时代的风采。从众多参赛作品中…

C语言笔试题之实现C库函数 strstr()(设置标志位)

实例要求&#xff1a; 1、请你实现C库函数strstr()&#xff08;stdio.h & string.h&#xff09;&#xff0c;请在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;&#xff1b;2、函数声明&#xff1a;int strStr(char* h…

MATLAB知识点:易错点:判断浮点数是否相等

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章 3.4.3 关系运算 下面我们再来看一个易错点&…