使用 iframe + postMessage 实现跨域通信（一）

最新推荐文章于 2024-06-25 00:17:42 发布
最新推荐文章于 2024-06-25 00:17:42 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Javascript HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39355295/article/details/102516892
版权
本文介绍了如何使用iframe结合window.postMessage方法来安全地实现跨域通信。首先，解释了同源策略限制及为何需要跨域通信。接着，详细说明了window.postMessage的基本语法，包括接收消息窗口的引用、消息内容、目标来源以及可选参数。最后，提供了示例代码，展示了一个包含iframe的父页面（send.html）如何与子页面（receive.html）进行通信的实践操作。
摘要由CSDN通过智能技术生成

1、来源介绍

(1)通常情况下，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”），不同页面上的脚本允许彼此访问。
(2)==window.postMessage()==提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）—就是本文所讲实现跨域通信。

2、语法介绍

(1)window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如页面和嵌入其中的iframe之间。

发送消息的基本语法：
targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow–接收消息的窗口的引用：
  • Window.open
  • Window.opener
  • HTMLIFrameElement.contentWindow
  • Window.parent （本身为子页面，将父页面作为消息接受窗口）
  • Window.frames +索引值
message：
  • 发送到目标窗口的消息
targetOrigin：
  • 指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串“*”或URI
  • *表示任何目标窗口都可接收
</
最低0.47元/天 解锁文章
qq_39355295
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe + postMessage 跨域通信
Somnus_djj的博客
02-19 314
Web是构建在同源策略基础之上，同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。我们可以通过iframe来实现不同域之间互相请求资源。 同源 概念：协议相同、域名相同、端口相同 目的：保证用户信息的安全，防止用户数据泄露 限制范围： Cookie、LocalStorage、 IndexDB 无法读取 Dom 无法获取 AJAX 请求在浏览器端有跨域限制 ifr.
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题
u011200562的博客
08-01 4492
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题。父页面的参数，但是原因两个的域名不一样，所以会出现。
使用 iframe + postMessage 实现跨域通信
热门推荐
糖衣
02-28 7万+
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage  postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。语法： otherWindow.postMessage(m
iframe通信——postMessage
最新发布
m0_72791534的博客
06-25 1658
postMessage是HTML5中新引入的API，它可以实现跨窗口以及跨域的通信。postMessage类似与Ajax但是它不受同源策略的限制并且通信双方都是客户端。本文的目的就是验证下这种跨页面通信方法的使用流程。
记一次使用window.parent.postMessage传值
qq_43806488的博客
08-26 1万+
最近需求中出现一个iframe 在点击完成之后 子 iframe 需要给 父iframe 传递一个参数 在父iframe中这么接受 在created和 mounted 都可以 window.addEventListener('message', this.handleMessage,'事件名') 事件这么写 handleMessage(e) { if (e.data.status === 'ok') { this.f
Vue进阶（八十六）：iframe 结合 window.postMessage 实现跨域通信
IT全栈 华强工作室
11-27 6457
什么是iframe？iframe元素会创建包含另外一个文档的内联框架（即行内框架）。什么是？方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数设置为相同值) 时，这两个脚本才能相互通信。方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
iframe+postMessage实现跨域通信
08-22
iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。 
使用iframe+postMessage实现页面跨域通信的示例代码
11-21
经常会利用iframe在一个父页面中嵌入另外一个子页面，或者在一个父页面中弹出另一个页面，由于同源策略的限制，父子页面之间的脚本无法实现通信，而使用postMessage方法就实现了父子页面之间的跨域信息传递。...
详解使用postMessage解决iframe跨域通信问题
12-13
总的来说，`postMessage`是现代Web开发中解决跨域通信问题的一个强大工具，它简化了iframe和其他窗口之间的交互。熟练掌握`postMessage`的使用，可以极大地提升跨域应用的用户体验和功能实现。在实际应用中，根据...
html5通过postMessage进行跨域通信的方法
09-27
本文将深入探讨`postMessage`的工作原理及其在跨域通信中的应用。 `postMessage`方法的基本语法如下： ```javascript otherWindow.postMessage(message, targetOrigin, [transfer]); ``` - `otherWindow`：是要...
详解html5 postMessage解决跨域通信的问题
01-19
本文介绍了详解html5 postMessage解决跨域通信的问题，分享给大家，具体如下： 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, ...
在iframe中使用postMessage解决跨域问题
cszzl123的博客
03-11 3902
在iframe中使用postMessage解决跨域问题 在iframe中向父页面发送消息时，子页面和父页面的http协议，域名，端口号任意一个不相同时会产生跨域问题，使用postMessage可解决这一问题。 父页面JS代码 window.onload = function() { window.addEventListener('message', function (e) { // 监听 message 事件 console.log(e.data); }); } 子页面JS
iframe跨域通信-postMessage
qq_33475629的博客
05-23 1614
iframe跨域通信-postMessage
postMessage 通信 | Iframe 通信
然后他就拿棍子来打我
01-30 1394
父级判断 Iframe 是否有效，且只有 Iframe 加载完毕后才能成功传递 message。
iframe跨域通信 postMessage
Sugar0219的博客
03-17 588
一、 跨域通信概述 MessageEvent 四个属性 message（类型） data（window.postMessage的第一个参数） origin（调用postMessage时页面的当前状态） source（调用postMessage的窗口信息） 二、postMessage语法 window.postMessage(message，targetOrigin、[transfer]) 父窗口 <div class='parent'> <iframe src='子窗口链接
Web前端iframe使用以及页面通信postmessage
weixin_42845571的博客
06-29 5113
iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了 <iframe src="demo_iframe_sandbox.htm"></iframe> iframe常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.width:框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[nam
跨页面通信之postMessage
juzipchy的博客
12-25 942
最近要写的一个页面内嵌了一个iframe，引入的页面是其他域名的页面。复页面需要获取子页面iframe里面的信息，这就需要子页面像父页面传值，首先想到了用iframe间的通信。 // 子页面 <div id='child'>i am a child</div> <script> window.onload = function() { ...
如何在vue中使用 iframe + postMessage 实现跨域通信 还避免iframe卡顿
05-12
在Vue中使用iframe + postMessage实现跨域通信，可以参考以下步骤： 1. 在Vue中使用iframe元素来展示需要跨域通信的页面，例如： ```html <template> <div> <iframe ref="iframe" src="https://example.com"></iframe> </div> </template> ``` 2. 在Vue组件的mounted钩子中，注册监听iframe的message事件，接收消息并处理： ```javascript mounted() { window.addEventListener("message", this.handleMessage, false); }, methods: { handleMessage(event) { // 处理接收到的消息 } } ``` 3. 在iframe页面中，使用父窗口的postMessage方法向父窗口发送消息： ```javascript window.parent.postMessage({ data: "hello" }, "*"); ``` 4. 在Vue组件中，使用iframe的contentWindow.postMessage方法向子窗口发送消息： ```javascript this.$refs.iframe.contentWindow.postMessage({ data: "hello" }, "*"); ``` 为了避免iframe卡顿，可以考虑使用懒加载的方式加载iframe元素，即在需要展示iframe的时候再去加载它，而不是在组件被挂载时就加载。可以使用Vue的异步组件来实现懒加载： ```html <template> <div> <component :is="iframeComponent"></component> </div> </template> <script> export default { data() { return { iframeComponent: null } }, mounted() { // 在需要展示iframe的时候加载组件 this.iframeComponent = () => import('./Iframe.vue') } } </script> ``` 在Iframe.vue组件中，再展示实际的iframe元素，并注册message事件监听器。这样可以确保iframe元素只在需要的时候加载，避免卡顿问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值