iframe + postMessage 跨域通信

最新推荐文章于 2025-05-23 06:48:58 发布

长安的安

最新推荐文章于 2025-05-23 06:48:58 发布

阅读量478

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/Somnus_djj/article/details/113861817

本文探讨了Web的同源策略及其目的，并详细介绍了如何利用iframe和postMessage进行跨域通信。通过设置iframe的基本属性如src、name、width等，结合postMessage API在不同的应用场景下，如页面与iframe、窗口间的通信，实现数据的安全传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web是构建在同源策略基础之上，同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。我们可以通过iframe来实现不同域之间互相请求资源。

同源

概念：协议相同、域名相同、端口相同
目的：保证用户信息的安全，防止用户数据泄露
限制范围：
- Cookie、LocalStorage、 IndexDB 无法读取
- Dom 无法获取
- AJAX 请求在浏览器端有跨域限制

iframe

基本属性

src iframe地址
name iframe名称
width
height
frameborder 否显示框架周围的边框
- 1 有边框
- 0 无边框
scrolling 是否在 iframe 中显示滚动条
- yes
- no
- auto

postMessage

postMessage是HTML5中新引入的API，该方法可以通过绑定window的message事件来实现跨窗口以及跨域的通信。

应用场景

页面和其打开的新窗口的数据传递
页面与嵌套的 iframe 进行消息传递
多窗口之间消息传递

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

长安的安

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

iframe+postMessage跨域通信

qq_41742961的博客

01-15

398

场景：（单点登录）从应用平台登录成功后，点击系统图标跳转到对应系统的首页实现方式：在A系统写入iframe，应用平台点击按钮后跳转A体统（window.open），加载A系统的代码，当A体统中的iframe.onload加载完毕后，通知平台已经加载完毕(ifram.content.postMessage),可以给我发送token了，对应平台应该添加一个监听事件接收ifram发送来的消息，(widown.addEventListioner),并且平台拿到消息后将token发送给ifame，对应iframe也

使用 postMessage + iframe 实现跨域通信

每天都要努力学习哦~~

06-12

1174

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。时事件被多次触发，而使用。

参与评论您还未登录，请先登录后发表或查看评论

postmessage解决iframe页面跨域

10-19

通过JS技术解决引入iframe页面引起的跨域问题，postmessage解决iframe页面跨域问题

使用 iframe + postMessage 实现跨域通信

liudanyang_21的博客

06-14

335

在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。语法： otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow：其他窗口的引用，如 iframe

跨域解决方案之postMessage

最新发布

跟佟格码路一起学习计算机知识吧~

05-23

2126

postMessage是 HTML5 引入的 API，用于实现窗口（window）之间的跨域通信。它允许一个窗口向另一个窗口发送文本数据，无论这两个窗口是否同源。接收方窗口可以通过监听message事件来获取发送的数据，并进行相应处理。这一机制的出现，为 Web 应用在不同源之间进行安全、可控的数据交互提供了可能。

iframe跨域通信(postMessage)

包磊磊的博客

04-15

1426

iframe跨域通信(postMessage) 前言 ❝ 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域 ❞ 需求背景在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行...

iframe跨域通信-postMessage

qq_33475629的博客

05-23

1873

iframe跨域通信-postMessage

iframe+postMessage实现跨域通信

08-22

iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。

使用iframe+postMessage实现页面跨域通信的示例代码

11-21

经常会利用iframe在一个父页面中嵌入另外一个子页面，或者在一个父页面中弹出另一个页面，由于同源策略的限制，父子页面之间的脚本无法实现通信，而使用postMessage方法就实现了父子页面之间的跨域信息传递。...

使用postMesssage()实现iframe跨域页面间的信息传递

01-21

由于web同源策略的限制，当页面使用跨域iframe链接时，主页面与子页面是无法交互的，这对页面间的信息传递造成了不小的麻烦，经过一系列的尝试，最后我发现有以下方法可以实现： 1. 子页面url传参简单说来就是把所有需要传递的参数加到与主页面同源的url上，将子页面重定向到该url,然后主页面通过iframe的src获取这些参数过程非常复杂，不建议使用这种方法 2. postMessage() postMesssage()是HTML5提供的一个基于事件的消息传输API，可以实现跨文本档、多窗口、跨域消息传递。 postMessage(data,origin)方法接受两个参数

iframe 利用postMessage 跨域通信

caideb的博客

11-05

441

1.子页面：http://localhost:7080/b.jsp <button onclick="send()">send</button> <script> window.addEventListener('message', function(ev) { var data = ev.data; console.info('messa...

postMessage 跨域通信 iframe

BigOrange的博客

07-15

1288

需求背景： iframe嵌套页面，需要进行参数传递，同时父与子是跨域（跨源）的。核心方法： window.postMessage() 方法可以安全地实现跨源通信。 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。 message 将要发送到其他

iframe跨域通信 postMessage

Sugar0219的博客

03-17

674

一、跨域通信概述 MessageEvent 四个属性 message（类型） data（window.postMessage的第一个参数） origin（调用postMessage时页面的当前状态） source（调用postMessage的窗口信息）二、postMessage语法 window.postMessage(message，targetOrigin、[transfer]) 父窗口 <div class='parent'> <iframe src='子窗口链接

iframe+postMessage进行跨域通信

GitLuckyd的博客

09-24

962

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、window.PostMessage二、使用步骤1.前提2.通信总结前言参考 iframe+postMessage实现跨域通信项目需要在layui+jq的网站中引入一个vue的页面， layui+Jq网站地址：http://192.168.2.86:9988/ vue网站地址：http://192.168.2.86:8081/#/formShow 要解决跨域的问题，以及通信的问题提示：可直接看代码理解一、wi

在iframe中使用postMessage解决跨域问题

cszzl123的博客

03-11

4045

在iframe中使用postMessage解决跨域问题在iframe中向父页面发送消息时，子页面和父页面的http协议，域名，端口号任意一个不相同时会产生跨域问题，使用postMessage可解决这一问题。父页面JS代码 window.onload = function() { window.addEventListener('message', function (e) { // 监听 message 事件 console.log(e.data); }); } 子页面JS

Vue进阶（八十六）：iframe 结合 window.postMessage 实现跨域通信

IT全栈华强工作室

11-27

6984

什么是iframe？iframe元素会创建包含另外一个文档的内联框架（即行内框架）。什么是？方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数设置为相同值) 时，这两个脚本才能相互通信。方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

【安全与协议】使用 iframe + postMessage 实现跨域通信

Umbrella_Um的博客

06-23

1058

在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。语法： otherWindow.postMessage(message, targetOrigin, [transfer]) otherWindow：其他窗口的引用，如 iframe的

如何在vue中使用 iframe + postMessage 实现跨域通信还避免iframe卡顿

05-12

在Vue中使用iframe + postMessage实现跨域通信，可以参考以下步骤： 1. 在Vue中使用iframe元素来展示需要跨域通信的页面，例如： ```html <iframe ref="iframe" src="https://example.com"></iframe> ``` ...