Vue进阶(九十二):应用 postMessage 实现窗口通信_vue使用postmessage


一、拓展阅读

在前端应用中,窗口间通信应用场景很多,比如弹出qq登录认证窗。在这里插入图片描述

二、postMessage 语法

window.postMessage(msg,targetOrigin)

注意⚠️postMessage要通过window对象调用!因为这里的window不只是当前window!大部分使用postMessage的时候,都不是本页面的window,而是其他网页的window!如:

  1. iframecontentWindow
  2. 通过window.open方法打开新窗口的window
  3. window.opener

如果你使用postMessage时没有带window,就是用的本页面的window来调用它。

2.1 参数说明
<
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值