文章目录
一、前言
在前期博文《Vue进阶(六十四):iframe更改src后页面未刷新问题解决》中讲解了iframe
更改src
后页面未刷新问题的解决方法,此篇博文主要讲解采用iframe
方式嵌套页面IE
下页面未展示问题的解决方法。
二、问题分析
项目的嵌套逻辑如下:
通过 A项目系统a1页面点击菜单进入自己的发起页面,点击发起页面发起按钮,调用后台请求返回B项目系统待跳转b1页面URL,A项目系统通过
iframe
方式嵌套b1页面,其中b1页面通过iframe
方式嵌套A项目系统a2页面及B系统其他页面。
三、解决方法
通过B项目系统检测到A项目系统传递的系统标识,向A系统发送消息,消息体中包含A系统待展示的页面URL,A系统通过监听接收到B系统发送过来消息,刷新当前页面,处理逻辑如下:
A系统:
<template>
<div>
<iframe v-if="hackReset" ref="otherSysIFrame" frameborder="0" height="1100" width="100%" :src="$route.params.url"></iframe>
</div>
</template>
<script>
export default {
data () {
return {
hackReset: false
}
},
updated () {
this.hackReset = true
this.$nextTick(() => {
if (this.$refs.otherSysIFrame) {
let iframeSrc = this.$route.params.url
if (this.getClass(iframeSrc) === 'String' && iframeSrc.indexOf(window.location.host) > -1) {
this.$refs.otherSysIFrame.contentWindow.location.href = iframeSrc
}
}
})
},
watch: {
$route: {
handler () {
this.hackReset = false
}
}
},
mounted () {
this.hackReset = true
window.addEventListener('message', event => {
if (this.$refs.otherSysIFrame) {
this.$refs.otherSysIFrame.contentWindow.postMessage(event.data, '\*')
// IE
if (this.getIEVersion() !== -1) {
if (this.getClass(event.data) === 'String' && event.data.indexOf('URL_LINK') > -1) {
let URL_LINK = JSON.parse(event.data).URL_LINK || ''
if (URL_LINK && this.getClass(URL_LINK) === 'String') {
let secondWindow = this.$refs.otherSysIFrame.contentWindow
for (let i = 0; i < secondWindow.frames.length; i++) {
secondWindow.frames[i].location.href = URL_LINK
}
}
}
}
}
})
}
}
</script>
B系统:
if (vm.$route.query.source && (vm.$route.query.source === 'castlm' || vm.$route.query.source === 'exosystem')) {
vm.isExosystem = true
// 外系统返回按钮显示标识
if (vm.$route.query.backBtnFlag === 'backBtn') {
vm.backBtnFlag = true
vm.display = true // 显示返回按钮
} else {
vm.display = false // 隐藏返回按钮
}
if (vm.$route.query.bustpid === 'Main') {
vm.iframeRefreshFlag = true
}
else if (vm.query.flag && vm.query.flag === 'Exosystem') {
vm.isExosystem = true
if (vm.query.bustpid) {
if (vm.query.bustpid === 'Main') {
vm.iframeRefreshFlag = true
}