iframe + postMessage 跨域通信

最新推荐文章于 2024-06-12 18:06:45 发布
最新推荐文章于 2024-06-12 18:06:45 发布
阅读量309 收藏 1
点赞数
分类专栏： js 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Somnus_djj/article/details/113861817
版权

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元/天 解锁文章
长安的安
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 嵌套iframe_React嵌套iframe,使用postMassage进行交互
weixin_35523284的博客
01-13 3185
iframe是什么? 引用:MDNwindow.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议(通常为https)，端口号(443为https的默认值)，以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控...
使用postMessage进行react和iframe的数据通信.md
weixin_30725467的博客
09-27 497
将react的数据传递给iframe 1.首先在父组件(react文件)内引入iframe <iframe style={{border:0,width:"100%",height:"100%",}} src='/model.html' id='calculation' //onLoad={this.sendToken} /> 2.然后在父组件(rea...
使用 postMessage + iframe 实现跨域通信
最新发布
每天都要努力学习哦~~
06-12 765
一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。时事件被多次触发，而使用。
[前端] iframe及postMessage使用解析
网站前端/PHP/Android/其他
08-27 1万+
这篇主要讲iframe标签，对于frameset、frame、noframe标签就不讲了，因为在h5中已经不支持了。 一、iframe标签介绍： <iframe> 标签规定一个内联框架。 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 二、iframe标签兼容： <iframe src="page_two.html" name="ifram...
Vue进阶（八十六）：iframe 结合 window.postMessage 实现跨域通信
IT全栈 华强工作室
11-27 6397
什么是iframe？iframe元素会创建包含另外一个文档的内联框架（即行内框架）。什么是？方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数设置为相同值) 时，这两个脚本才能相互通信。方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
在iframe中使用postMessage解决跨域问题
cszzl123的博客
03-11 3885
在iframe中使用postMessage解决跨域问题 在iframe中向父页面发送消息时，子页面和父页面的http协议，域名，端口号任意一个不相同时会产生跨域问题，使用postMessage可解决这一问题。 父页面JS代码 window.onload = function() { window.addEventListener('message', function (e) { // 监听 message 事件 console.log(e.data); }); } 子页面JS
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-22
HTML5的`postMessage` API是为了解决Web应用程序中的跨域通信问题而设计的。在Web开发中，由于浏览器的安全策略，不同源的页面不能直接共享或交换数据，这被称为同源策略。然而，有时候我们需要在不同源的页面之间...
html5通过postMessage进行跨域通信的方法
09-27
本文将深入探讨`postMessage`的工作原理及其在跨域通信中的应用。 `postMessage`方法的基本语法如下： ```javascript otherWindow.postMessage(message, targetOrigin, [transfer]); ``` - `otherWindow`：是要...
postmessage解决iframe页面跨域
10-19
通过JS技术解决引入iframe页面引起的跨域问题，postmessage解决iframe页面跨域问题
iframe跨域通信(postMessage)
包磊磊的博客
04-15 1340
iframe跨域通信(postMessage) 前言 ❝ 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域 ❞ 需求背景 在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行...
iframe跨域消息通信(postMessage和message事件)
热门推荐
黄彪博客
01-16 1万+
文章目录文章参考知识点例子说明能不能使用非message事件？ 文章参考 IFrame消息传递 使用 iframe + postMessage 实现跨域通信 知识点 页面需要监听 message 事件，window.addEventListener(“message”, dealMessage, false); 父页面向子iframe页面发送消息： document.getElementById("mapIframe").contentWindow.postMessage("父页面向子页面
react iframe 使用contentWindow.postMessage 传递参数
github_38696818的博客
04-20 4357
A项目（react）使用iframe 嵌套B(react) 项目时候需要传递一个对象； private gettaskDetailIframeSrc = () => { const { currentGroup } = this.props; let origin = location.origin; let path = '/app/oa'; let search = `?${agent.setCurrentOrg(curren
使用 postMessage 解决 iframe 跨域通信问题
喜洋杨
04-07 3927
是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。postMessage方法第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，我们设置为*，代表所有url都允许发送。总结：所谓的跨窗口发送消息，就是通过在别的窗口操作本窗口发送消息，然后本窗口再自己接收的方式实现。首先我们模拟场景，假设有两个不同源的页面，
两个跨域页面通信（iframe） (postMessage)
pig_ning的博客
11-22 449
两个跨域页面通信（iframe） (postMessage)
跨域传递数据（iframe）, postMessage用法
weixin_44042792的博客
08-03 3460
otherWindow：其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。2. A页面为父页面，A页面中嵌套B页面（iframe）3. B页面为iframe页面，即A页面中src所指页面。message：要传递的数据。...
js iframe 通过postMessage 向父页面跨域传数据
辣子鸡的博客
09-30 7531
在iframe嵌套的页面内使用如下方法传递消息 var autoMessage = {"name":"三三"}; window.parent.postMessage(autoMessage,'*');postMessage的参数：第一个:要传递的数据，可以是字符串，可以是对象。第二个:通知给哪个源下面的资源，比如“http://www.baidu.com”,则只有父页面在次源下才能接收到这个数据
如何在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、付费专栏及课程。

余额充值