iframe通讯传值之1，子页面调用父页面的方法

微应用或者程序中总是会嵌套人别的项目的网站页面，这个时候iframe就显得有为重要，但是相对应的bug也很多 以下父页面统称为A页面，父页面嵌入的子iframe页面统称为B页面

今天记录的问题是： 子页面调用父页面里面的方法

1,谷歌浏览器114版本之前可以通过父子iframe使用全局的document.domain配置域名使其进行父子iframe通讯 如A页面中在main.js中全局设置

document.domain = 'xxxx域名

并将给B页面使用的方法挂在在window上即可 如

    window.addNewTab = (data) => {
    console.log('我是B页面要调用A页面的新增tab方法，data是B页面传来的参数',data)
   }

B页面在需要调用A页面方法的页面配置;

document.domain = 'xxxx域名

B页面在window.parent中调用对应的A页面的方法即可

     window.parent.addNewTab({
             url: '跳转的路有地址',
             name:"tab名",
            params:{
                key:"传参1的入参"
            }
      })

2，但是在最新的117以上版本，谷歌浏览器不支持使用document.domain进行iframe调用方法，会将B页面的域名https转成http，导致出现跨域的bug 报错如

流程执行错误 Error: code流程解析错误：SecurityError: Blocked a frame with origin "https://xxxx.com" from accessing a cross-origin frame

这时候我们就不能使用document.domain解决了，要用window.parent.postMessage进行通讯

字典地址：developer.mozilla.org/en-US/docs/…

解决思路:

A页面通过监听B页面的message的就可以拿到B页面的传值,不用return，在你的iframe页面里面加个监听就行，记得销毁，防止内存泄露

解决办法： A页面

这里用vue3了
setup(){
    window.addEventListener("message", event => {
      console.log('监听B页面通讯数据的massage',event)
          addNewTab(event.data)
    })
}

B页面,调用window.parent.postMessage方法，将传的数据和参数2对应的A页面的域名地址强行修改即可

const click = ()=>{
    document.domain = 'xxxx域名'
    const urlMap = {
        test: "子路由测试路径",
        pre: "子路由预发路径",
        pro: "子路由生产路径",
    }
    const env = 使用自己的方法拿到当前的环境（测试预发，线上等）
    const path = urlMap[env]
    //配置自己来
    const data = {
        url: path,
        name:"tab名",
    }
    const protocol = window.location.protocol;//拿到当前的协议名
    const isTest = env === "test"; // 测试环境、
    const isPre = env === "prev"     //预发环境
    const envs = isTest ? "-test" : isPre ? "-pre" : "";
    window.parent.postMessage(data, `${protocol}//xxx域名${envs}.com`);
}

这时候A页面就可以在event。data中拿到B页面传来的值