vue 页面嵌入iframe应用

一、常规Vue页面嵌入Iframe

Vue页面嵌入的iframe，操作嵌入的iframe页面的DOM元素

<template>
<div class="iframe-container">
  <iframe :src="src" scrolling="auto" frameborder="0" class="frame" id="myIframe" ref="myIframe"></iframe>
</div>
</template>

<script>
import { LocalEvent } from '@js/common/index'
export default {
  data () {
    return {
      src: '',
      iframeWin: ''
    }
  },
  methods: {
    fatherpost(){
      let accountId = LocalEvent.get('accountId')
      let obj = {
        accountId: accountId
      }
      console.log('---父级iframe传的参数---',obj)
    	this.iframeWin.postMessage(JSON.stringify(obj),'http://dy.syingdata.com')
    }
  },
  mounted () {
    this.iframeWin = this.$refs.myIframe.contentWindow;
    document.getElementById("myIframe").onload=()=>{
      this.fatherpost()
      //判断 iframe是否加载完成  这一步很重要
      // 设置嵌入的页面 头部和左侧菜单隐藏
      // -------此处遇到一个问题，多层嵌套的时候，出现布局混乱的情况，闪现到第一层布局 ----------
      // 此问题通过其他二方式去解决
      
      this.iframeWin.document.getElementById('ifrLayout').style.height="100vh"
      this.iframeWin.document.getElementById('ifrHeader').style.display="none"
      this.iframeWin.document.getElementById('ifrSiderBarMenu').style.display="none"
    }

    let path = this.$route.path
    let _path = path.replace('/layout/stream/data-list','/layout/index/accountliveroom')
    this.src = `http://dy.syingdata.com${_path}/${LocalEvent.get('accountId')}`
    console.log('---跳转的src---',this.src)

  },
  watch: {
    // $route: {
    //   handler: function (val, oldVal) {
    //     let path = val.path.replace('/layout/obtain-evidence','')
    //     this.src = `http://222.188.107.135/dzqz/#${path}`
    //     console.log(this.src)
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.iframe-container {
  width: 100%;
  height: 100vh;
  .frame {
    width: 100%;
    height: 100%;
  }
}
</style>

接受页面

created() {
    // console.log("accountId====>", this.$route.params.accountid);
    // this.accountId = this.$route.params.accountid;

    let params = LocalEvent.get('paramsObj')
    window.addEventListener('message', e => {
      params = JSON.parse(e.data)
      LocalEvent.set('paramsObj', JSON.parse(e.data))

      this.accountId = params.accountId

      this.getTableConfig();
      this.getLiveroomList(0);
      // this.getAnchorInfo();
      //请求汇总数据
      // this.liveDataSummary();

    },false)
    
  },

相关文章参考：https://www.jb51.net/article/34942.htm