iframe嵌套页面IE不展示问题解决

举报
SHQ5785 发表于 2023/09/28 08:54:24 2023/09/28
【摘要】 一、前言在前期博文《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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。