场景:
项目中使用了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只会执行一次
江湖救急 急急急 求大牛帮看下
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…