一、前言

在前期博文《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 === 'PROC_CCMS_SMEIRA_Main') {
    vm.iframeRefreshFlag = true
  }

else if (vm.query.flag && vm.query.flag === 'Exosystem') {
  vm.isExosystem = true
  if (vm.query.bustpid) {
    if (vm.query.bustpid === 'PROC_CCMS_SMEIRA_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_OFSM为获取的嵌套页面URL
  if ((this.isOFSM || this.iframeRefreshFlag) && document.getElementById('iframe')) {
    var interval = setInterval(() => {
      if (this.URL_LINK_OFSM) {
        let data = {
          URL_LINK: this.URL_LINK_OFSM  // 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)
  }
},

四、拓展阅读

• 《Vue进阶（六十四）：iframe更改src后页面未刷新问题解决》

HTML里有着这么一个标签 ifarme 。我们把它称做为内联框架标签。刚开始学习搭建页面的时候基本用不上，到现在自己学习做项目后才明白了这个标签的重要性。当看到标签中的 src 属性，就告诉我们可以在我们自己的网站页面加载其它的网站或者本站的其它页面内容，也就是嵌套页面。

在W3School里详细介绍：
1.支持iframe的浏览器

IE、Firefox、Chrome、Safari、Opera，
在不支持iframe的浏览器里是看不到嵌套效果的。

2.iframe的定义和用法

iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

3.HTML与XHTML之间的差异

在HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。

4.提示

您可以把需要的文本放置在 iframe 和 /iframe之间，这样就可以应对无法理解 iframe的浏览器。

5.示例

通常呢，我们使用iframe直接在页面嵌套标签设置指定src 值。接下来就把百度网页嵌套到自己的网页里面。

但是，我们可以看到下图所示：iframe标签只有它自己的默认样式，嵌套进去的页面又小又窄，这并不是我们想要的iframe。

6.iframe的属性

给iframe设置一些需要的属性和样式。

iframe页面嵌套问题

开发工具与关键技术：VisualStudio C#
作者：落灵
撰写时间：2019/6/8

一、 iframe的框架根据内容自适应高度
iframe是在项目设计中经常用到的框架标签。而它的作用就是把页面嵌套在自身形成的框架体中，从而实现在一个固定的地方可以切换多个页面，并且其他内容不变。在使用iframe这个框架标签时新手往往是直接固定iframe的宽高。那么当文本内容的长度不一样时就要一个一个地设置。当有上百个页面时这无疑是增加了代码量。而这个问题的解决方法也非常简单，我们只需要让它自适应高度就好。

二、 点击iframe内部页面进行页面跳转问题
iframe虽然可以嵌套多个页面，但也存在一个非常严重的问题。那就是iframe标签的页面跳转问题。正常情况下我们可以通过点击iframe框架区以外的地方来改变iframe嵌套的内容。但当我们在被iframe嵌套的页面里写window.location.href的页面跳转事件时，跳转的那个页面它不会覆盖掉当前的页面，而是被嵌套进iframe里。由于页面的宽度的百分比发生了变化，这对极大地影响被嵌套的页面的样式。例子如下图

就像上面这个样子。而不能让iframe内部嵌套的页面覆盖掉当前页面也是有原因的，因为这涉及到了安全性的问题。有iframe的一般都是主页面，如果让外来的页面把主页面覆盖掉，那么这个页面就可以对主页面进行操作，能够获取到主页面的信息。所以iframe內部嵌套的页面进行window.location.href的页面跳转时，跳转到的页面也会嵌套进iframe里面。
可当我们点击iframe里面的页面跳转到另一个页面需要把当前的页面覆盖掉时又该怎么办？这是我们可以通过点击a标签进行跳转；

<a id="a_link" href="" target="_blank" hidden></a>

target=”_blank”是从空白页打开新的页面，如果是target=”_self”就是从当前页面打开新的页面，如果是这样的话，打开的页面还是会被嵌套进iframe里面，所以我们从空白页打开。

三、点击iframe外部的页面进行iframe页面嵌套问题
这个问题是涉及到了iframe的主页面与其他页面的关联性。在首次加载主页面时我们可以在方法里用attr设置主页面的默认首次加载页面，然后再调用方法，这样就可以设置iframe首次加载的页面了。

可当有存在两个页面，点击一个页面的a标签，跳到主页面时iframe要把对应的页面嵌套进来。而主页面本身就有与另一个页面相同的标签，点击后就能把对应的页面嵌套进来。那么，问题就来了，怎么通过点击当前页面的标签触发另一个页面对应标签的点击事件？
这个问题就需要通过控制器的参数传递了来解决了。我们可以在点击跳转到主页面的同时通过控制器传递一个参数到主页面。控制器接收到参数后用View.Data或者View.Bag接收参数，然后再在主页面设置一个隐藏的input标签接收参数。这时我们就可以通过对参数的判断让iframe嵌套对应的页面了。假如在a页面有学生，老师，校长这三个标签。点击学生时就把学生这个字段传递到主页面，主页面则判断传递过来的参数。当参数==“学生”时嵌套学生页面，参数==“老师”时嵌套老师页面，以此类推，问题就解决了。