当前位置: 首页 > news >正文

浏览器窗口间的通信

一、汇总

在这里插入图片描述

二、同源策略

在这里插入图片描述

三、webSocket (无跨域限制)

优点:无跨域限制
缺点:成本高
在这里插入图片描述

四、客户端存储

1、localStorage + onStorage

在这里插入图片描述
在这里插入图片描述

例子:
在这里插入图片描述

在这里插入图片描述

2、定时器 + 客户端存储

在这里插入图片描述

例子:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

缺点:
在这里插入图片描述

五、postMessage (无跨域限制)

在这里插入图片描述

例子:
在这里插入图片描述
index.html

<body><div><iframe src="./ifr.html" id="ifr" style="width:600px; height:300px"></iframe></div>主窗口<div><div>Message:</div><div id="messages"></div></div><script>window.addEventListener("message", function (event) {messages.innerHTML += `<div>${event.data}</div>  `})setInterval(() => {ifr.contentWindow.postMessage(`message from index.html, ${Date.now()}`)}, 5000)</script>
</body>

ifr.html

<body>iframe窗口<div><div>Message:</div><div id="messages"></div></div><script>window.addEventListener("message", function (event) {messages.innerHTML += `<div>${event.data}</div>  `})setInterval(()=> {window.parent.postMessage(`message from ifr.html, ${Date.now()}`)}, 5000)</script>
</body>

六、Broadcast Channel 事件广播 超级好用!!!

  • 允许同源的不同浏览器窗口、Tab页、frame或者iframe下的不同文档之间相互通信
  • 缺点:同源策略

核心代码:
在这里插入图片描述

例子:
在这里插入图片描述

<body><section><iframe src="./page1.html"></iframe><iframe src="./page2.html"></iframe></section></body>
<body><h3>Page 1</h3><section style="margin-top:50px; text-align: center"><input id="inputMessage" value="page 1的测试消息" /><input type="button" value="发送消息" id="btnSend" /><section id="messages"><p>收到的消息:</p></section></section><script>var messagesEle = document.getElementById("messages")var messageEl = document.getElementById("inputMessage")var btnSend = document.getElementById("btnSend")var channel = new BroadcastChannel("channel-BroadcastChannel")channel.addEventListener("message", function (ev) {var msgEl = document.createElement("p")msgEl.innerText =ev.data.date + " " + ev.data.from + ":" + ev.data.messagemessagesEle.appendChild(msgEl)})btnSend.addEventListener("click", function () {var message = messageEl.valuechannel.postMessage({date: new Date().toLocaleString(),message,from: "page 1"})})</script>
</body>
  <body><h3>Page 2</h3><section style="margin-top:50px; text-align: center"><input id="inputMessage" value="page 2的测试消息" /><input type="button" value="发送消息" id="btnSend" /><section id="messages"><p>收到的消息:</p></section></section><script>var messagesEle = document.getElementById("messages")var messageEl = document.getElementById("inputMessage")var btnSend = document.getElementById("btnSend")var channel = new BroadcastChannel("channel-BroadcastChannel")channel.addEventListener("message", function(ev) {var msgEl = document.createElement("p")msgEl.innerText = ev.data.date + " " + ev.data.from + ":" + ev.data.messagemessagesEle.appendChild(msgEl)})btnSend.addEventListener("click", function() {var message = messageEl.valuechannel.postMessage({date: new Date().toLocaleString(),message,from: "page 2"})})</script></body>

七:MessageChannel (无跨域限制)

  • Channel Messaging API 的 MessageChannel接口允许我们创建一个新的消息通道,并通过它的两个MessagePort属性发送数据
  • 缺点: 需要先创建联系

核心代码:
在这里插入图片描述

例子:
在这里插入图片描述

<body><iframe id="ifr" src="./ifr.html" style="width:600px; height:300px"></iframe><div>主窗口</div><div><div>Message:</div><div id="messages"></div></div><script>const channel = new MessageChannel()var ifr = document.querySelector('iframe')ifr.onload = function () {ifr.contentWindow.postMessage('__init__', '*', [channel.port2])}// 监听消息channel.port1.onmessage = onMessagefunction onMessage(e) {messages.innerHTML += `<div>${event.data}</div>  `}// 轮询发送setInterval(function(){channel.port1.postMessage(`message from index.html, ${Date.now()}`)}, 5000)</script>
</body>
<body>iframe窗口<div><div>Message:</div><div id="messages"></div></div><script>window.addEventListener("message", function (event) {if (event.data === "__init__") {initChannel( event.ports[0])}})function initChannel(port) {port.onmessage = function (event) {messages.innerHTML += `<div>${event.data}</div>  `port.postMessage(`message from the iframe, ${Date.now()}`);}}</script>
</body>

八、SharedWorker

  • SharedWorkerWeb Worker的一种, 可单独开启一个进程,用于同域页面通讯
  • Web Worker可开启子进程执行JS,但不能操作DOM
  • 缺点:兼容性、同源策略

例子:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章:

浏览器窗口间的通信

一、汇总 二、同源策略 三、webSocket (无跨域限制) 优点&#xff1a;无跨域限制 缺点&#xff1a;成本高 四、客户端存储 1、localStorage onStorage 例子&#xff1a; 2、定时器 客户端存储 例子&#xff1a; 缺点&#xff1a; 五、postMessage &#xff08;无跨域…...

MATLAB 的 plot 绘图

文章目录 SyntaxDescriptionplot(X,Y)plot(X,Y,LineSpec)plot(X1,Y1,…,Xn,Yn)plot(X1,Y1,LineSpec1,...,Xn,Yn,LineSpecn)plot(Y)plot(Y,LineSpec)plot(tbl,xvar,yvar)plot(tbl,yvar)plot(ax,___)plot(___,Name,Value)p plot(___) plot: 2-D line plot Syntax plot(X,Y)plo…...

SpringBoot项目--电脑商城【获取省市区列表】

1.易错点 1.错误做法 新增收货地址页面的三个下拉列表的内容展示没有和数据库进行交互,而是通过前端实现的(将代码逻辑放在了distpicker.data.js文件中),实现方法是在加载新增收货地址页面时加载该js文件,这种做法不可取 2.正确做法 把这些数据保存到数据库中,用户点击下拉…...

使用git把本地项目关联远程代码仓库,并推送到远程仓库

你在本地新建了一个项目&#xff0c;写好了代码&#xff0c;但是没有关联远程仓库&#xff0c;怎么关联并上传呢&#xff1f; 你要先去gitee创建一个代码仓库&#xff0c;然后复制http地址。 首次提交项目代码到一个新建的远程仓库&#xff1a; 1、通过命令 git init 把这个…...

Spring+MyBatis使用collection标签的两种使用方法

目录 项目场景&#xff1a; 实战操作&#xff1a; 1.创建菜单表 2.创建实体 3.创建Mapper 4.创建xml 属性描述&#xff1a; 效率比较&#xff1a; 项目场景&#xff1a; 本文说明了Spring BootMyBatis使用collection标签的两种使用方法 1. 方法一: 关联查询 2. 方法…...

k8s集群中集群方式安装nacos

1、前提条件 一个k8s集群&#xff0c;其中有三个master 节点&#xff0c;这三个节点的标签名称为etcd 三个master节点的ip 分别为&#xff1a;192.165.187.170 、192.165.187.171、192.165.187.172一个mysql 数据库&#xff0c; 数据库的ip 为&#xff1a;192.165.187.180 用户…...

极客时间:数据结构与算法之美【学习笔记+思考实践】

本篇是 《极客时间&#xff1a;数据结构与算法之美》课程的学习笔记和带有自己的一些思考实践。原文学习链接如下&#xff1a;https://time.geekbang.org/column/intro/100017301 开篇词 | 从今天起&#xff0c;跨过“数据结构与算法”这道坎01 | 为什么要学习数据结构和算法&a…...

基于视觉重定位的室内AR导航项目思路(2):改进的建图和定位分离的项目思路

文章目录 一、建图二、定位首先是第一种方法&#xff1a;几何方法其次是第二种方法&#xff1a;图像检索方法最后是第三种方法&#xff1a;深度学习方法 前情提要&#xff1a; 是第一次做项目的小白&#xff0c;文章内的资料介绍如有错误&#xff0c;请多包含&#xff01; 一、…...

nodejs+vue+elementui精品课程网站设计

前端技术&#xff1a;nodejsvueelementui基于nodejs语言、vue.js框架、B/S架构、Mysql数据库设计并实现了精品课程网站设计。系统主要包括首页、个人中心、用户管理、课程信息管理、课程分类管理、学习论坛、在线试题管理、试题管理、系统管理、考试管理等功能模块。 本文首先介…...

40个Linux常用命令组合

1.删除0字节文件 find -type f -size 0 -exec rm -rf {} \; 2.查看进程 按内存从大到小排列 ps -e -o "%C : %p : %z : %a"|sort -k5 -nr 3.按cpu利用率从大到小排列 ps -e -o "%C : %p : %z : %a"|sort -nr 4.打印说cache里的URL grep -r -a jpg …...

NIFI关于Variables的使用

说明 NIFI中的变量&#xff08;variables&#xff09;和参数&#xff08;parameters&#xff09;在引用的时候是有区别的。 参数的引用是使用#{参数名}的形式。 变量是使用${变量名}的形式来引用。 nifi版本&#xff1a;1.23.2&#xff08;docker镜像&#xff09; Variable…...

2、VRP基础

本节我们介绍华为设备的VRP系统平台的一些基本知识&#xff0c;为以后学习路由交换的配置命令做好基本的准备。在这里&#xff0c;为软考网络工程师做准备&#xff0c;只需要了解其中比较基础的即可&#xff0c;包括VRP是什么、提供了哪些用户界面、VRP的用户级别、基本的配置视…...

docker容器运行成功但无法访问,原因分析及对应解决方案(最新,以Tomcat为例,亲测有效)

原因分析&#xff1a; 是否能访问当运行docker容器虚拟机&#xff08;主机&#xff09;地址 虚拟机对应的端口号是否开启或者防墙是否关闭 端口映射是否正确&#xff08;这个是我遇到的&#xff09; tomcat下载的是最新版&#xff0c;docker运行后里面是没有东西的&am…...

第15章 秒杀商品隔离解决方案

mini商城第15章 秒杀商品隔离解决方案 一、课题 商品秒杀-热门数据实时收集 二、回顾 1、掌握热门分析收集方案 2、Lua高级语法 3、Kafka使用 4、Lua垂直日志收集 5、Apache Druid大数据实时处理系统 三、目标 1、MyBatis查询Apache Druid 常规查询 复杂查询 2、热门…...

2023-08-31力扣每日一题-姜汁水题

链接&#xff1a; 1761. 一个图中连通三元组的最小度数 题意&#xff1a; 选择两两相连的三个点&#xff0c;要求度最小 解&#xff1a; 什么暴力hard 实际代码&#xff1a; #include<bits/stdc.h> using namespace std; int minTrioDegree(int n, vector<vect…...

五大优化技巧,让你的视频直播app源码更加流畅

优化技巧一&#xff1a;性能调优 视频直播app源码在确保流畅体验方面是至关重要的。为了提升性能&#xff0c;以下是几项关键的优化技巧&#xff1a; 使用轻量级编码器和解码器&#xff1a;选择高效的编码器和解码器&#xff0c;以减少资源占用&#xff0c;并确保视频流畅播放…...

Weblogic10中常用Linux指令

一.Weblogic 创建域 域目录/servers/AdminServer 路径下 以weblogic帐号登录&#xff08;与创建域目录相对应账户&#xff09; cd /home/weblogic/bea/weblogic92/common/bin 执行./config.sh进入配置界面。配置步骤如下&#xff1a; 1.Choose between creating and exten…...

OpenAI 函数调用教程

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 什么是OpenAI函数调用&#xff1f; OpenAI API 非常擅长以系统的方式生成响应。只需几行代码即可管理提示、优化模型输出以及执行、生成和语言应用程序。 即使有这么多好东西&#xff0c;OpenAI API对开发人员和工程…...

Spark有两种常见的提交方式:client 模式和 cluster 模式对机器 CPU 的影响

Spark有两种常见的提交方式&#xff1a;client 模式和 cluster 模式。这两种方式对机器 CPU 的影响略有不同 &#xff0c;请参考以下说明 Client 模式&#xff1a; 在 Client 模式下&#xff0c;Spark Driver 运行在提交任务的客户端节点上&#xff08;即运行 spark-submit 命…...

HarmonyOS/OpenHarmony(Stage模型)应用开发单一手势(三)

五、旋转手势&#xff08;RotationGesture&#xff09; RotationGesture(value?:{fingers?:number; angle?:number}) 旋转手势用于触发旋转手势事件&#xff0c;触发旋转手势的最少手指数量为2指&#xff0c;最大为5指&#xff0c;最小改变度数为1度&#xff0c;拥有两个可…...

python复习--进程相关--is_alive()

一、Process.is_alive() is_alive() 是 multiprocessing.Process 提供的方法&#xff0c;用于 判断进程当前是否仍在运行。 process.is_alive()返回值&#xff1a; True → 进程正在运行False → 进程未启动 或 已经结束 二、进程生命周期与 is_alive() 一个 Process 对象…...

保姆级教程:YOLOv8轻量化模型从训练到安卓部署全流程(附避坑指南)

保姆级教程&#xff1a;YOLOv8轻量化模型从训练到安卓部署全流程&#xff08;附避坑指南&#xff09; 在移动端实现实时目标检测一直是计算机视觉领域的热门方向。YOLOv8作为当前最先进的检测模型之一&#xff0c;其轻量化版本在安卓设备上的部署需求日益增长。本文将手把手带…...

5分钟部署阿里RexUniNLU:Web界面操作,无需编程基础

5分钟部署阿里RexUniNLU&#xff1a;Web界面操作&#xff0c;无需编程基础 1. 认识RexUniNLU&#xff1a;零样本理解的神器 想象一下&#xff0c;你刚接手一个新项目&#xff0c;老板丢给你一堆用户评论&#xff0c;要求你快速分析出大家对产品"屏幕"、"续航&…...

CCC数字钥匙Release 3实战:如何用BLE/UWB实现无钥匙进入(附避坑指南)

CCC数字钥匙Release 3实战&#xff1a;BLE/UWB无钥匙进入系统开发全解析 当你的手机靠近车辆时&#xff0c;车门自动解锁——这种科幻般的体验正通过CCC数字钥匙Release 3标准变为现实。作为汽车电子工程师&#xff0c;我曾用nRF5340开发板搭配UWB模块完整实现了这套系统&#…...

Z-Image Atelier 生成动态效果预览:通过序列图像模拟简单动画过程

Z-Image Atelier 生成动态效果预览&#xff1a;通过序列图像模拟简单动画过程 最近在玩一个挺有意思的AI图像工具&#xff0c;叫Z-Image Atelier。它最吸引我的地方&#xff0c;不是生成单张多么精美的图片&#xff0c;而是它能帮你“脑补”出一段动态过程。简单来说&#xff…...

避开这些坑!在PX4 1.14.0上添加自定义串口传感器的完整避坑指南

PX4 1.14.0自定义串口传感器开发实战&#xff1a;从设备注册到数据解析全链路避坑指南 当你在PX4飞控上尝试接入一款新型激光雷达时&#xff0c;是否遇到过这样的场景&#xff1a;按照官方文档一步步操作&#xff0c;编译通过后却发现传感器始终无法输出有效数据&#xff1f;本…...

别再到处找转换工具了!用Audacity把WAV无损转成MP3,保姆级图文教程

音频处理新手指南&#xff1a;Audacity无损转换WAV到MP3的完整方案 你是否曾经下载了一段高质量录音&#xff0c;却发现文件体积大得惊人&#xff0c;根本无法通过邮件发送&#xff1f;或者尝试上传播客内容时&#xff0c;平台总是提示"文件格式不支持"&#xff1f;这…...

CLIP 实战宝典:从零开始掌握文本与图像编码的终极技巧

1. CLIP模型基础入门&#xff1a;图文匹配的魔法钥匙 第一次听说CLIP模型时&#xff0c;我正被一个图像搜索项目折磨得焦头烂额。传统方法需要先标注海量数据&#xff0c;再训练复杂的分类器&#xff0c;整个过程就像用算盘计算火箭轨道。直到遇见CLIP&#xff0c;才发现原来图…...

Nacos服务实例权重设置详解:如何根据服务器性能动态调整流量分配

Nacos服务实例权重设置详解&#xff1a;如何根据服务器性能动态调整流量分配 在分布式系统架构中&#xff0c;服务实例的性能差异是不可避免的现实问题。新采购的服务器与运行多年的老旧设备并存&#xff0c;不同配置的云主机混合部署&#xff0c;这些场景都要求我们能够智能地…...

OpenCore Legacy Patcher实用指南:让老旧Mac焕发新生

OpenCore Legacy Patcher实用指南&#xff1a;让老旧Mac焕发新生 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着苹果不断推进macOS系统更新&#xff0c;…...