文章目录
一、前言二、问题分析三、解决方法四、拓展阅读一、前言
在前期博文《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 = truethis.$nextTick(() => {if (this.$refs.otherSysIFrame) {let iframeSrc = this.$route.params.urlif (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 = truewindow.addEventListener('message', event => {if (this.$refs.otherSysIFrame) {this.$refs.otherSysIFrame.contentWindow.postMessage(event.data, '*')// IEif (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.contentWindowfor (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 = truevm.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 = trueif (vm.query.bustpid) {if (vm.query.bustpid === 'Main') {vm.iframeRefreshFlag = true}vm.bustpid = vm.query.bustpid}body = {tkiids: vm.query.tkiids, // 任务实例idnodeid: vm.query.nodeid, // 当前环节tpid: vm.query.tpid, // 模板IDpiids: 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为获取的嵌套页面URLif ((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)}},
