vue使用 iframe + postMessage 实现通信，前端岗面试

最新推荐文章于 2024-06-24 16:15:07 发布
最新推荐文章于 2024-06-24 16:15:07 发布
阅读量857 收藏 14
点赞数 13
分类专栏： 2024年程序员学习 文章标签： 前端 vue.js 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60607675/article/details/137253703
版权
本文介绍了如何在Vue应用中利用iframe和postMessage实现跨域通信。详细阐述了子页面如何判断自身是否被嵌套以及如何向父页面发送和接收消息。同时，提到了在使用postMessage时的安全注意事项，如验证来源和限制目标origin。此外，作者分享了自己的前端开发经验和学习资源，包括面试技巧和大厂面经，以帮助开发者提升技能。
摘要由CSDN通过智能技术生成

_this.$refs.iframe.contentWindow.postMessage({ msg: ‘父页面消息’ }, ‘http://172.16.150.72:8081’);

}

},

false

);

}

};

这里src需要带两个参数，

isIframe和origin，分别代表了 是否是iframe嵌套 和 来源

这两个参数可以提供给嵌套页面做判断 以及 可以给父页面传递信息

3、子页面代码

判断是否为嵌套页面

是的话则向父发送消息，然后开始监听父页面传递过来的消息

三、其它

=======================================================================

1、安全问题

1、如果你不希望从其他网站接收 message，请不要为 message 事件添加任何事件监听器。

2、如果你确实希望从其他网站接收message，请始终使用 orig

最低0.47元/天 解锁文章
面试魔法师
关注
  • 13
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用iframe 等实现两个窗口通信方法之－postMessage
dxj124的博客
11-09 1937
两个窗口的通信问题应该是一个比较常见的问题了，通信可以通过很多种方式,如下： localStorage postMessage websocket 平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postM...
vue3+ts+antd 前端基础模板
01-14
vue3结合vite使用typescript搭建的带有路由的轻量级布局模板。 Vue.js 的最新版本，它引入了许多新的特性和改进。以下是一些 Vue 3 的新特性： Composition API：Vue 3 引入了一个新的 API，称为 Composition API。...
vue中iframe的 postMessage message的使用,以及一些小疑问
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
07-04 2127
单点登录（跨域的情况），就可以利用iframe postMeaage于message进行通讯，将token存入其他网站的本地存储中，实现单点登录
vue使用 iframe + postMessage 实现通信
cxz
12-16 1793
1、在本地起两个工程 方便我们测试 父：http://172.16.150.72:8080 this.$refs.iframe.contentWindow.postMessage(‘消息’,目标src) 子：http://172.16.150.72:8081 window.addEventListener(‘message’,(e)=>{console.log(‘接收信息’)}) 2、父页面代码 <template> <div class="box"> &l
vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据
最新发布
weixin_65644264的博客
06-24 269
如果数据不需要即时性或频繁更新，你可以使用 `localStorage` 或 `sessionStorage` 来存储和读取数据。- **安全性考虑：** 使用 `postMessage` 时，务必验证消息来源 (`event.origin`)，以防止恶意代码注入。- **跨域问题：** 如果 Vue 页面和 HTML 页面不在同一个域下，需要确保服务器允许跨域通信，或者使用安全的消息传递方式。- **在 HTML 页面中接收消息：**- **在 Vue 页面中发送消息：**
vue页面内嵌iframe使用postMessage进行数据交互（postMessage跨域通信）
nullsheep的博客
02-27 1055
vue html 跨域
Vue Iframe postMessage双向数据通信 + 跨域
m0_48968874的博客
07-17 1361
iframe：IFRAME是标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的框架（即行内框架）。
前端基础（三十八）：iframe通信、浏览器跨窗口通信
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
01-22 1110
iframe通信、浏览器跨窗口通信
iframe通信
汉堡请不要欺负面条
08-02 394
iframe作为一个html标签，可以让嵌入任何的html网页。解决跨域问题的方法，通过postMessage发送消息，相应的页面进行消息监听，监听到正确消息后再执行操作
详解使用postMessage解决iframe跨域通信问题
12-13
【跨域通信问题与postMessage】 在Web开发中，跨域通信是一个常见的挑战，由于浏览器的同源策略限制，不同源的页面之间不能直接共享数据或触发交互。然而，有时候我们需要在一个页面（如主页面）中嵌入另一个页面...
使用vue(vue3) + ffmpeg + wasm 实现纯前端音视频编辑，功能包括：视频剪辑、音频剪辑
04-03
在现代Web开发中，实现复杂的音视频编辑功能已经成为可能，特别是在使用先进的技术栈如Vue（特别是Vue3）和FFmpeg的WebAssembly（wasm）版本的结合时。Vue.js作为一个流行的JavaScript框架，提供了强大的组件化开发...
vue基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生
11-01
基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 适合人群：具备一定编程基础，工作1-3年的研发人员 能学到什么： 1、使用postMessage方法来完成基座项目和子...
2.（vue3.x+vite）调用iframe的方法（vue编码）.rar
09-22
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue进阶（九十二）：应用 postMessage 实现窗口通信_vue使用postmessage
2401_84411323的博客
05-09 429
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Iframe 通信：一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目进行通信
虎康的博客
02-01 2300
当接收到来自父窗口的消息时，就会将消息打印输出到控制台中，并使用postMessage方法向父窗口发送了一条消息。需要注意的是，当使用postMessage方法发送消息时，第二个参数指定的是消息的目标窗口的origin，这里我们使用通配符*表示允许发送消息到任何域名，但在实际应用中建议设置具体的域名。然后，在父窗口中监听了message事件，当接收到来自iframe的消息时，就会将消息打印输出到控制台中。需要注意的是，由于涉及到跨域通信，需要确保两个项目的域名不同，否则会受到浏览器的同源策略限制。
JS案例：前端Iframe及Worker通信解决思路
05-09 1305
在前端开发中，经常会使用iframe来实现一些特殊的需求，比如将第三方的页面嵌入到自己的页面中，或者在同一页面中显示多个不同的内容。然而，由于iframe具有独立的文档结构和执行环境，所以在多个iframe之间进行数据交互和通信变得十分困难。此时iframe之间的通信就非常重要，为了让iframe与父级或其他页面共享数据和状态或使页面间达到联动的目的，我用JS实现了一个插件包，这里做个分享首先我们需要熟悉iframe的通信方式window对象提供了postMessage函数，使用postMessage给子页
前端常用的几种跨域通信方式实践：jsonp&cors&postMessage&改域
flying meng的菜鸟居
11-27 1561
为什么说是“ 前端 ”“ 跨域 ” ？ 跨域方式有三种：jsonp、cors，以及动态代理。 相比之“基于”前端的前两种方法，最后一种不太常用 —— 没错，cors一般来讲是后端设置，但是完全可以让前端“一力以担之”。 前文推荐（不了解“跨域”的可以先看这里）： https://blog.csdn.net/qq_43624878/article/details/95853615 jsonp方式解决...
iframe的使用和 contentWindow、parent以及postMessage通信方式
weixin_50367873的博客
12-03 2791
问题： 如何进行消息通信（父发给子，子接收父的消息，也可父直接调用子的方法； 子发给父，父接收子的消息；） 如何找到指定的子或者父window（如果iframe层级过多），又如何在发送消息时不影响其他的message监听 一、iframe的使用 <iframe style={{border:0,width:"100%",height:630,}} src={src} /> 如何进行消息通信（父发给子，子接收父的消息； 子发给父，父接收子的消息） 方法一： 直接通过获取父或者子的
如何在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、付费专栏及课程。

余额充值