iframe嵌套页面IE不展示问题解决
【摘要】 一、前言在前期博文《Vue进阶(六十四):iframe更改src后页面未刷新问题解决》中讲解了iframe更改src后页面未刷新问题的解决方法,此篇博文主要讲解采用iframe方式嵌套页面IE下页面未展示问题的解决方法。 二、问题分析项目的嵌套逻辑如下:通过 A项目系统a1页面点击菜单进入自己的发起页面,点击发起页面发起按钮,调用后台请求返回B项目系统待跳转b1页面URL,A项目系统通过i...
一、前言
在前期博文《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
}
vm.bustpid = vm.query.bustpid
}
body = {
tkiids: vm.query.tkiids, // 任务实例id
nodeid: vm.query.nodeid, // 当前环节
tpid: vm.query.tpid, // 模板ID
piids: vm.query.piids,
isEdit: vm.query.isEdit // 是否可编辑页面
}
}
....
mounted () {
// console.log('mounted!')
// 挂载window.onresize事件
let _this = this // 复制Vue的this
_this.changeFrameSize()
window.onresize = () => {
_this.changeFrameSize()
}
// 应用定时器setInterval方法用于解决OFSM双层Iframe嵌套页签不显示问题,其中URL_LINK为获取的嵌套页面URL
if ((this.isOFSM || this.iframeRefreshFlag) && document.getElementById('iframe')) {
var interval = setInterval(() => {
if (this.URL_LINK) {
let data = {
URL_LINK: this.URL_LINK // WFP标识
}
let newData = JSON.stringify(data)
window.parent.postMessage(newData, '*')
// 务必及时清除定时器,否则会导致浏览器崩溃
clearInterval(interval)
}
}, 100)
}
// 处理任务进来后监听:用于外系统的Iframe内提交任务后返回待处理列表
if (this.query.flag === 'WFP' && this.query.isEdit === '1') {
window.addEventListener('message', this.listenerIframe)
}
},
四、拓展阅读
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)