浏览器不同源的页面之间如何跨域通信

目录

  • 1，需求
  • 2，难点
  • 3，思路
    • 浏览器不同源的页面之间如何跨域通信？
  • 4，实现
    • 第1版
    • 第2版
    • 最终版
    • 其他的问题
      • 1，页面路径需完全一致。
      • 2，事件注册问题

1，需求

现在有2个项目，页面路径不同源。

  • ToC 的收银台项目

类似在PC端京东淘宝，支付最后一步的收银台页面，可以选择不同支付工具付款。

  • ToB 的后台管理项目

可以对收银台项目整体做一些配置：样式，支付工具相关的等等，配置项很多。

需求

  1. 想要在后台管理项目中增删配置项后，能够实时预览收银台项目最终的展示效果
  2. 展示效果符合预期，则提交修改配置项的审批电子流
  3. 审批通过，上线

2，难点

因为2个项目的页面路径不同源，传递数据是个问题。

3，思路

首先，后台管理项目需要增加【预览】按钮，收银台项目需要增加【预览】页面。

  1. 需要后端参与。收银台项目的相关配置项，本来就是通过接口获取的。所以再增加一个预览数据的接口，在预览页面调用获取数据。

  2. 不需要后端参与。前端直接在2个页面之间通信。

第1种思路没有什么好说的，重点来说下第2种。

浏览器不同源的页面之间如何跨域通信？

  1. 通过 url 传参。最简单直接，不过传递的数据大小有限。

  2. postMessage，传递的数据大小我实测可以超200MB！（不知道极限，因为没再往上测试）

简单来说，我们可以获取从当前页面A通过window.open打开的页面B的引用 targetWindowB，然后在A页面通过 targetWindowB.postMessage() 向B页面分发消息。

再介绍下 window.open

简单说明：window.open 有3个参数，我们只关注前2个

  1. strUrl：新页面的地址
  2. strWindowName：新页面的名称，如果指定了该参数，则再次调用 window.open(strUrl, strWindowName) 时，不会再打开第2个新页面，而是跳转到打开的第1个页面并重新加载。（效果下面会有展示）

另外需要注意：调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。
会有什么问题，看下实现过程就知道了。

4，实现

通过 vite 创建2个项目模拟，A 会向 B 发送数据。启动后的页面地址分别是：

  1. A页面（后台管理项目 manage）http://localhost:5173
  2. B页面（收银台项目 cashier）http://localhost:5174

第1版

A页面后台管理项目 manage

<script setup>
const cashierUrl = "http://localhost:5174";
const data = { name: "下雪天的夏风" };
let cashierWindow;function init() {cashierWindow = window.open(cashierUrl, "cashierWindow");if (cashierWindow) {cashierWindow.postMessage(data, cashierUrl);}
}
</script><template><h1>manage</h1><button @click="init">发送预览数据</button>
</template>

B页面收银台项目 cashier

<script setup>
window.addEventListener("message",function (event) {if (event.origin !== "http://localhost:5173") return;if (event.data) {console.log(event.data);}},false
);
</script><template><h1>cashier</h1>
</template>

效果：

在这里插入图片描述

可以看到收银台项目并没有接收到消息！

原因就是：调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。

换句话说，因为B页面还没有加载完成，message 事件还没有被绑定时，A页面已经把消息发送了。

第2版

延迟发送消息。

function init() {cashierWindow = window.open(cashierUrl, "cashierWindow");setTimeout(() => {if (cashierWindow) {const data = { name: "下雪天的夏风" };cashierWindow.postMessage(data, cashierUrl);}}, 1000);
}

效果：

在这里插入图片描述

B页面成功收到消息！

问题来了，因为这个测试用例比较简单，所以 1s B页面就会加载完成。
可面对复杂的页面+网络问题，A页面如何知道B页面已经加载完成了（message 事件绑定了）？

答案是：此时B页面可以通过 window.opener 获取 A页面的引用，使用 postMessage 向A页面发送数据！

实现思路：

  1. B页面加载完成后，通过window.opener.postMessage() 向A页面发送一个约定字段。
  2. A页面接收到约定字段后，再向B页面发送目标数据。

最终版

A页面后台管理项目 manage

<script setup>
import { ref } from "vue";
const cashierUrl = "http://localhost:5174";
const cashierLoaded = ref(false);
let cashierWindow;function init() {cashierWindow = window.open(cashierUrl, "cashierWindow");if (cashierLoaded.value) {requestData();} else {window.addEventListener("message", receiveMessage, false);}
}function receiveMessage(event) {if (event.origin !== cashierUrl) return;cashierLoaded.value = event.data === "__done__";requestData();
}const data = { name: "下雪天的夏风" };
function requestData() {cashierWindow.postMessage(data, cashierUrl);
}
</script><template><h1>manage</h1><button @click="init">发送预览数据</button>
</template>

B页面收银台项目 cashier

<script setup>
const manageUrl = "http://localhost:5173";if (window.opener) {window.opener.postMessage("__done__", manageUrl);
}window.addEventListener("message",function (event) {if (event.origin !== manageUrl) return;if (event.data) {console.log(event.data);}},false
);
</script><template><h1>cashier</h1>
</template>

效果

在这里插入图片描述

其他的问题

1，页面路径需完全一致。

2个不同源页面通信时，要注意设置的 url 要完全一致才能接收到消息。例如 http://localhost:5174 和 http://localhost:5174/ 是不一样的！

2，事件注册问题

看下面的代码

function init() {cashierWindow = window.open(cashierUrl, "cashierWindow");if (cashierLoaded.value) {requestData();} else {window.addEventListener("message", receiveMessage, false);}
}function receiveMessage(event) {if (event.origin !== cashierUrl) return;cashierLoaded.value = event.data === "__done__";requestData();
}
  1. init 方法中，每次都要执行window.open 吗，不能把 cashierWindow 保存起来调用requestData 吗？

也可以这样做。但这个例子中是为了每次执行后，默认跳转到 B页面并刷新。

  1. init 方法中，每次都要注册message 事件吗，万一打开的B页面加载较慢，又返回到A页面再次点击发送数据，岂不是又会再次注册事件吗？

确实会再次注册事件，不过没关系，因为注册相同的事件监听器，多余的监听器会被移除，只保留一个。参考
只保留一个的前提是：事件回调函数不能是匿名函数，否则还是会注册多个！所以把 receiveMessage 提取出来了。

我们来验证下最终版代码的效果：

在这里插入图片描述

而如果监听 message 事件这样写，

window.addEventListener("message",// function receiveMessage(event) { // 效果一样function(event) {if (event.origin !== cashierUrl) return;cashierLoaded.value = event.data === "__done__";requestData();},false);

再来看下效果：

在这里插入图片描述

以上。如果对你有帮助，可以点赞支持下！

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Xilinx A7开发板LVDS IO无输出问题解决方法

Xilinx A7开发板LVDS IO无输出问题解决方法

使用A7-35T FGG484的FPGA开发板bank16上的IO作为差分LVDS的输入输出&#xff0c;搭建输入输出测试工程发现LVDS可以输入、无法输出。查阅UG471&#xff0c;找到如下信息&#xff1a; 手册中已经针对A7的LVDS做了明确的应用说明&#xff1a; &#xff08;1&#xff09;HP bank上…
阅读更多...
数组的学习

数组的学习

数组学习 文章目录 数组来由数组的使用数组的内存图变量声明和args参数说明声明分配空间值的省略写法数组的length属性数列输出求和判断购物金额结算Arrays的sort和toString方法Arrays的equals和fill和copyOf和binarySearch方法字符数组顺序和逆序输出 数组来由 录入30个学生…
阅读更多...
telnet检验网络能不能通

telnet检验网络能不能通

telnet检测网络能不能通&#xff08;ip地址端口号&#xff09;
阅读更多...
阿里云平台WoSignSSL证书应用案例

阿里云平台WoSignSSL证书应用案例

沃通CA与阿里云达成合作并在阿里云平台上线WoSign品牌SSL证书。自上线以来&#xff0c;WoSignSSL证书成为阿里云“数字证书管理服务”热销证书产品&#xff0c;获得阿里云平台客户认可&#xff0c;助力阿里云平台政府、金融、教育、供应链、游戏等各类行业客户实现网站系统数据…
阅读更多...
利用OpenCV实现图像拼接

利用OpenCV实现图像拼接

一、介绍 图像拼接. 二、分步实现 要实现图像拼接&#xff0c;简单来说有以下几步&#xff1a; 对每幅图进行特征点提取对对特征点进行匹配进行图像配准把图像拷贝到另一幅图像的特定位置对重叠边界进行特殊处理 PS&#xff1a;需要使用低版本的opencv&#xff0c;否则无法使…
阅读更多...
扩散模型实战（二）：扩散模型的发展

扩散模型实战（二）：扩散模型的发展

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型从最初的简单图像生成模型&#xff0c;逐步发展到替代原有的图像生成模型&#xff0c;直到如今开启 AI 作画的时代&#xff0c;发展速度可谓惊人。下面介绍一下2D图像生成相…
阅读更多...
Unity Image(RawImage) 实现按轴心放大缩小，序列化存储轴心信息，实现编译器窗口保存轴心

Unity Image(RawImage) 实现按轴心放大缩小，序列化存储轴心信息，实现编译器窗口保存轴心

工作时分配给我的要实现的功能&#xff0c;写的时候遇到挺多的坑的&#xff0c;在此记录一下 效果 放大缩小的效果 2.编译器扩展窗口记录 实现点 1.Json序列化存储图片轴心位置, 放大倍率&#xff0c;放大所需要的事件 2.用了编译器扩展工具便于保存轴心信息坑点 1.Imag…
阅读更多...
FANUC机器人SRVO-300机械手断裂故障报警原因分析及处理办法

FANUC机器人SRVO-300机械手断裂故障报警原因分析及处理办法

FANUC机器人SRVO-300机械手断裂故障报警原因分析及处理办法 首先，我们查看报警说明书上的介绍： 总结：即在机械手断裂设置为无效时，机器人检测出了机械手断裂信号（不该有的信号，现在检测到了，所以报警） 使机械手断裂设定为无效/有效的具体方法：  按下示教器的MENU菜单…
阅读更多...
弘扬“两弹一星”精神，勇攀科学技术高峰——道本科技商业大学党日活动圆满落幕

弘扬“两弹一星”精神，勇攀科学技术高峰——道本科技商业大学党日活动圆满落幕

2023年8月2日&#xff0c;道本科技与商业大学携手举办了一场主题为“弘扬‘两弹一星’精神&#xff0c;勇攀科学技术高峰”的党日活动。本次活动旨在了解党领导下的中国核工业发展历程&#xff0c;传承和弘扬“两弹一星”精神&#xff0c;同时展示道本科技创新产品&#xff0c;…
阅读更多...
智慧工地云平台源码，基于微服务+Java+Spring Cloud +UniApp +MySql开发

智慧工地云平台源码，基于微服务+Java+Spring Cloud +UniApp +MySql开发

智慧工地可视化系统利用物联网、人工智能、云计算、大数据、移动互联网等新一代信息技术&#xff0c;通过工地中台、三维建模服务、视频AI分析服务等技术支撑&#xff0c;实现智慧工地高精度动态仿真&#xff0c;趋势分析、预测、模拟&#xff0c;建设智能化、标准化的智慧工地…
阅读更多...
【雕爷学编程】MicroPython动手做（29）——物联网之SIoT

【雕爷学编程】MicroPython动手做（29）——物联网之SIoT

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…
阅读更多...
Web压测工具http_load原理分析

Web压测工具http_load原理分析

01、前言 http_load是一款测试web服务器性能的开源工具&#xff0c;从下面的网址可以下载到最新版本的http_load&#xff1a; http://www.acme.com/software/http_load/ 这个软件一直在保持着更新&#xff08;不像webbench&#xff0c;已经是十年的老古董了。 webbench的源…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023