记录一次vue 项目中使用 iframe 嵌套其他项目

Posted 2020-12-10 superbrother

 

<template>
  <div class="hello" style="height:100%">
    <div class="hader-iframe">
      <div :class="logClass">
        <img src="../assets/logo.png" alt />
        <p>管理系统</p>
      </div>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="http://autel-cloud-web-admin-v2-dev.com/system/user">处理中心</el-menu-item>
        <el-menu-item index="http://autel-cloud-web-admin-dev.com/home">我的工作台</el-menu-item>
        <el-menu-item index="http://management-frontend-dev.com/deviceManageHome">消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
      </el-menu>
    </div>
    <div style="height:calc(100% - 61px)">
      <iframe
        :src="url"
        height="100%"
        width="100%"
        name="demo"
        frameborder="0"
        scrolling="auto"
        sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"
      ></iframe>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex2: ‘http://autel-cloud-web-admin-v2-dev.com/system/user‘,
      url: ‘http://autel-cloud-web-admin-v2-dev.com/system/user‘,
      logClass: ‘left‘
    }
  },
  created() {},
  mounted() {
    window.addEventListener(
      ‘message‘,
      e => {
        console.log(e)
        if (typeof e.data === ‘boolean‘ && e.data) {
          this.logClass = ‘left decrease-width‘
        } else {
          this.logClass = ‘left‘
        }
      },
      false
    )
  },
  methods: {
    handleSelect(key) {
      this.url = key
    }
  }
}
</script>

　　

父级页面向子页面传参

window.frames[0].postMessage(data,‘http://test.com:port‘);//第二个参数为子页面地址
//子页面接参
window.addEventListener(‘message‘,function(e){
    if(e.source != window.parent) return;
    console.log(e.data);
},false);

　　自己页面向父级页面传参

window.parent.postMessage(this.isActive, ‘*‘) //postMessage 第一个参数表示传递参数， 第二个参数表示域，*是所有域都能接受这个参数

//父页面接受参数
window.addEventListener(
      ‘message‘,
      e => {
        console.log(e)
        if (typeof e.data === ‘boolean‘ && e.data) {
          this.logClass = ‘left decrease-width‘
        } else {
          this.logClass = ‘left‘
        }
      },
      false
    )

　　子页面判断是否被 iframe 嵌套

Window.self === window.top   (true 表示未被嵌套，false 表示已嵌套)