Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决_iframe src 无效果

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

    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
            }
          }
        }
      }
    }
  })
}

}

**B系统：**

if (vm.KaTeX parse error: Expected 'EOF', got '&' at position 20: …e.query.source &̲& (vm.route.query.source === ‘castlm’ || vm.KaTeX parse error: Expected '}', got 'EOF' at end of input: …钮显示标识 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)
}
},

### 最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**