vue项目嵌套iframe实现发送、接收数据

vue嵌套iframe发送、接收数据

子页面




    
    
    
    iframe嵌套网页测试


    

vue中iframe的使用

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

获取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()
      }
    })

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的