基于postMessage 实现 非同源数据共享

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量231 收藏
点赞数
文章标签： 前端 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fool_man_/article/details/125555928
版权

基于postMessage 实现 非同源数据共享

业务需求：将多个不同公司开发的系统 统一在一起，只需一次登录。各个系统的开发人员提供token接口
  1. 各个子系统提供一个类似login界面的不需要携带token即可访问的页面A
  2. 我们采用window.open()来打开各个子系统页面A。
  3. 打开后 利用postMessage 向页面A发送token
  4. 页面A监听到token发送,并将其写在对应的位置。即可跳入各自的主页面
温水配甜梨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
非同源信息共享 postMessage
weixin_43983277的博客
03-02 514
otherWindow.postMessage(data, targetOrigin, [transfer]); 参数 说明 参数 说明 otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 data 将要发送到其他 window的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都
HTML5中的postMessage API基本使用教程
09-28
由于浏览器的安全策略，通常不允许不同源的页面直接访问对方的DOM或共享数据，但`postMessage`提供了一个解决途径。 ### 基本使用 `postMessage`方法接受两个参数：要发送的消息和接收消息的窗口的源（`...
(二)文档请求不同源之window.postMessage跨域
weixin_30706691的博客
04-02 183
一、基本原理 HTML5为了解决跨域，引入了跨文档通信API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。Internet Explorer 8+, chrome，Firefox , Opera和Safari 都支持这个功能。 二、测试步骤 1、创建a.html ...
postMessage——不同源的网页直接通过localStorage/sessionStorage/Cookies——技能提升
yehaocheng520的博客
12-22 3010
postMessage——不同源的网页直接通过localStorage/sessionStorage/Cookies——技能提升
postMessage
qietingfengdeyanse的专栏
07-22 337
最近公司项目遇到一个问题:项目中使用的百度地图插件不支持https协议,所以想到的办法是当请求是Https协议的时候,弹出一个新的浏览器tab(子页面),需要的数据由主页面传到子页面进行展示,但是其中还有如下问题 0 判断当前请求是https协议 window.location.protocol == "https:"(冒号不要忘l) 1 IE下不支持postMess
html post 两个页面,HTML5中使用postMessage实现两个网页间传递数据（
weixin_30562757的博客
06-04 305
原标题：HTML5中使用postMessage实现两个网页间传递数据(这篇文章主要为大家详细介绍了利用HTML5里的window.postMessage在两个 网页间传递数据的相关资料，postMessage API的功能是可以让你在两个浏览器窗口或iframe之间传递信息数据，对postMessage感兴趣的小伙伴们可以参考一下。估计很少人知道HTML5 APIS里有一个window.postM...
HTML5 postMessage解决跨域|跨窗口通信
HELLO WORLD
02-24 554
知识拓展 postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 语法 postMessage(data,origin) 方法接受两个参数 data:要传递的数据 html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参...
详解使用postMessage解决iframe跨域通信问题
12-13
在Web开发中，跨域通信是一个常见的挑战，由于浏览器的同源策略限制，不同源的页面之间不能直接共享数据或触发交互。然而，有时候我们需要在一个页面（如主页面）中嵌入另一个页面（如iframe），并实现两者之间的...
详解html5 postMessage解决跨域通信的问题
09-22
在Web开发中，由于浏览器的安全策略，不同源的页面不能直接共享或交换数据，这被称为同源策略。然而，有时候我们需要在不同源的页面之间进行通信，比如在一个页面中嵌入了第三方的IFRAME，此时`postMessage`就派上了...
JavaScript iframe数据共享接口实现方法
11-24
本文将详细介绍一种基于`window.top`的JavaScript iframe数据共享接口实现方法。 首先，理解`window.top`属性。`window.top`引用的是当前浏览器窗口的顶级窗口，即使在嵌套的iframe中，`window.top`始终指向最外层...
JavaScript使用HTML5的window.postMessage实现跨域通信例子
01-21
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多： 1.document.domain+iframe的设置，应用于主域相同而子域不同； 2.利用iframe和location.hash，数据直接暴露在了url中，数据容量和类型都有限 3.Flash LocalConnection， 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信， 只要 在同一客户端就行，跨应用程序， 可以跨域。 window.name 保存数据以及跨域 iframe 静态代理动态传输方案，充分的运用了window.name因为页面的url改变而name不改变的特性。 各种方案
html5跨域通讯之postMessage的用法总结
09-28
在Web开发中，由于浏览器的同源策略限制，不同源的网页之间不能直接进行JavaScript的交互，但`postMessage`提供了一种安全的机制来实现这种通信。 ### 1. `postMessage`基本原理 `postMessage`允许一个窗口（例如...
不同源页面的通信
m_review的博客
11-05 678
iframe 嵌套页面通过 postMessage 通信 父页面： file:///Users/yuejingge/Documents/a.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
HTML5解决跨域方案之postMessage
weixin_33991727的博客
07-12 139
postMessage()方法可以使不同源的脚本采用异步方式进行数据传递 两个参数 data 传递的数据，在传递参数的时候需要使用JSON.stringify()方法将对象参数序列化 origin 目标的源，协议，主机，端口号 将主页面和次级页面分别用node或者其他方法启动起来查看效果 详细说明在代码注释中 主页面 <body&g...
SendMessage、PostMessage原理
迷茫的小莱
03-23 847
SendMessage、PostMessage原理本文讲解SendMessage、PostMessage两个函数的实现原理，分为三个步骤进行讲解，分别适合初级、中级、高级程序员进行理解，三个步骤分别为：1、SendMessage、PostMessage的运行机制。2、SendMessage、PostMessage的运行内幕。3、SendMessage、PostMessage的内部实
postMessage到底有多好用
weixin_33690367的博客
01-16 793
postMessage是什么？ postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 Html5中的postMessage解决跨域，跨窗口消息传递 postMessage的优点 两个跨域页面的消息传递 多窗口之间的消息传递 嵌套iframe的数据传递 postMessage() postMessage()方法允许来自不同源的脚本...
不同源iframe跨域问题（window.postMessage）
weixin_43959024的博客
06-23 1358
最近遇见一个这样的问题：在一个网页中插入一个iframe，iframe页面执行成功之后需要跳转新页面，由于safair浏览器不能在新页面打开，so，选择在当前页面打开，由于iframe是个弹窗，用window.location.href跳转页面会在弹窗里展示，这时可以用window.postMessage解决 知识点：window.postMessage window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为http
html5 postMessage解决跨域、跨窗口消息传递
weixin_34221773的博客
12-08 692
一些麻烦事儿 平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()...
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 372
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
postMessage跨域写入cookie
09-15
总结而言，postMessage无法直接跨域写入cookie，但可以通过传递数据给同源窗口，并在同源窗口中写入cookie，再将结果返回给目标窗口，间接实现跨域写入cookie的功能。这是一种安全可靠的跨域通信方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值