vue中iframe的使用

最新推荐文章于 2025-02-05 14:13:35 发布

芝士焗红薯

最新推荐文章于 2025-02-05 14:13:35 发布

阅读量3.1w

点赞数 3

分类专栏： # vue 前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44320032/article/details/123871522

版权

前端同时被 2 个专栏收录

53 篇文章

订阅专栏

vue

44 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用iframe，包括在同域下自由操作iframe内容以及在跨域情况下实现页面跳转。重点讲解了如何通过CDM（Cross Document Messaging）进行跨域消息传递，如使用`postMessage`发送消息和监听`message`事件接收消息的详细步骤。

摘要由CSDN通过智能技术生成

iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。

<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>

获取iframe里面的内容

iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象

const _iframe = document.getElementById('iframe').contentWindow

CDM跨域

如果你设置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)进行跨域消息的传递。

发送消息: 使用postmessage方法

postMessage(message, targetOrigin)

message: 传递给iframe的内容, 通常是string,最好不要传object对象，需要传对象时，使用JSON.stringfy转换。

targetOrigin: 接受你传递消息的域名，可以设置绝对路径，也可以设置""或者"/"。 表示任意域名都行，"/"表示只能传递给同域域名。

_iframe.postMessage(JSON.stringify(_obj), '*')

接受消息: 监听message事件

当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性，data,origin,source.

window.addEventListener('message', function (event) {
      console.log(event)
      if (event.origin === window.callBackUrl.iframeSrc) {
        _this.childData = event.data
        console.log(event.data)
        _this.saveForm()
      }
    })