问答

vue项目中postMessage + ifram 跨域,接收不到消息

作者:admin 2021-05-14 我要评论

场景: 项目中使用了ifram + postmessage进行跨域的 , 我在a页面发送postmessage事件 , 在main.js中使用window.addeventListen进行事件监听 下面就是我的两个...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

场景:
项目中使用了ifram + postmessage进行跨域的 , 我在a页面发送postmessage事件 , 在main.js中使用window.addeventListen进行事件监听

下面就是我的两个地址:


# 视屏跨域的地址
VUE_APP_DOMAIN_URL = 'https://fin.fayuan.com/fodr/fodrmediator'

#原地址
VUE_APP_CUR_URL = 'http://tiaojie.court.gov.cn/fodr/fodrmediator'

a页面中:

//html
 <iframe style="width:100%" id="child" ref="iframBox" :src="domainSrc" v-show="true"></iframe>

//data定义需要跨域的地址
 domainSrc: `${process.env.VUE_APP_DOMAIN_URL}`,// 跨域的地址


//点击事件
call(){
      // 执行跨域登陆传参
      document.getElementById('child')
        .contentWindow.postMessage({
          handleType: 'loginIfram',
          partyids: this.checkList.join(","),
          id: this.id,
          loginInfo: {
            pwd: this.userDate.userPwd,
            tel: this.userDate.telephone
          }
        },
          this.domainSrc
        )
}

main.js中监听message事件 ,

const origin = process.env.VUE_APP_CUR_URL //原域名
const mainUrl = process.env.VUE_APP_DOMAIN_URL // 跨域地址
window.addEventListener('message', function (e) {
    let eOrigin = e.origin + '/fodr/fodrmediator'
    const openUrl = `${mainUrl}/#/viewRoom?partyids=${e.data.partyids}&id=${e.data.id}`

    console.log('验证信息是否跨域=>>', e.data.handleType == 'loginIfram', eOrigin == origin);

    if (e.data.handleType == 'loginIfram' && eOrigin == origin) { //这样来验证确保安全
        // const newWindow = window.open('_blank'); //提前申明这样防止直接打开网页谷歌拦截问题
        const newWindow = window.open(); //提前申明这样防止直接打开网页谷歌拦截问题
        console.log('data===>', e.data);
        // 重新登录一遍
        login({
            password: e.data.loginInfo.pwd,
            username: e.data.loginInfo.tel
        }).then(res => {
            if (res.code == 1) {
                console.log('当前登陆成功');
                newWindow.location.href = openUrl;
            }
        })
    }
})

现在就是npm run build之后 , 页面进入会打印一次mainjs的日志, 当我点击开始发消息的时候就没有日志打印了 , 好像没有接受到消息还是main,js只会执行一次

江湖救急 急急急 求大牛帮看下

###

这样看看

 domainSrc: process.env.VUE_APP_DOMAIN_URL

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请问下prometheus怎么进行自定义的按业

    请问下prometheus怎么进行自定义的按业

  • 节流函数为什么,点击无效,监听窗口大

    节流函数为什么,点击无效,监听窗口大

  • express访问静态资源失败

    express访问静态资源失败

  • IE 浏览器下 match 方法报错

    IE 浏览器下 match 方法报错

腾讯云代理商
海外云服务器