需求:A项目中有个菜单点击的时候中心内容页面与B项目的一模一样,所以产品想把B项目的页面直接嵌入过来显示,但其中有几个问题要处理就是嵌入B项目时B项目的左侧菜单和头部导航要隐藏,并而在跳时隐式登录,不需要用户重新在B项目又登录一次

A项目原来的样子:

 B项目原来的样子:

A项目代码:

加载Iframe成功前先获取A项目用户ID这里是写的模拟的;按实际开发来

<!-- 报告审核  -->
<template>
  <div class="report-container">
    <iframe
      :src="urlIframe"
      scrolling="no"
      frameborder="0"
      class="report-iframe"
      id="iframe"
      ref="reportIframe"
    ></iframe>
  </div>
</template>

<script>
import NProgress from "nprogress";
import api from "@/api/login.js";
let http = process.env.VUE_APP_IFRAMEURL;//B项目的IP地址
export default {
  name: "reportAudit",
  data() {
    return {
      urlIframe: http + "/#/detectionTask/ReportReview"
    };
  },
  mounted() {
    let iframe = document.getElementById("iframe");
    NProgress.start();//进度条
    let params = {
      userId: "011261f8368344baaf7932e205e6f5c0"
    };
    api
      .getCityLoginAccount(params)
      .then(res => {
        iframe.onload = () => {
          this.$refs.reportIframe.contentWindow.postMessage(
            {
              type: "reportIframe",
              data: {
                userInfo: res,
                originUrl: location.href, // 当前地址
                hiddenAside: true, //ture为隐藏
                hiddenHeader: true //隐藏头部
              } //可传被调用页面所需要的数据
            },
            this.urlIframe//针对这个地址允许跨域
          );
          NProgress.done();
        };
      })
      .catch(() => {});
  }
};
</script>

<style lang="less" scoped>
.report-container {
  width: calc(100% - 20px);
  height: 100%;
  .report-iframe {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding-bottom: 16px;
  }
}
.detectionTask {
  padding: 0 !important;
  padding-left: 10px !important;
}
.el-main {
  overflow-y: hidden;
}
</style>

B项目在全局路由router.beforeEach中接收并在里面处理自动登录与跳转的问题

import api from "@/api/login.js";
const whitePath = ["/login", "/updatePassword"];
router.beforeEach(async (to, from, next) => {
        getImplicitLogin(to, from);
    }
  }
});
// 获取省测pc嵌套Iframe传来的值做处理
function getImplicitLogin(to) {
  window.addEventListener(
    "message",
    event => {
      if (event.data && event.data.type == "reportIframe") {
        console.log("来来来是iframe");
        let { hiddenAside, hiddenHeader, userInfo } = event.data.data;
        to.meta.hiddenAside = hiddenAside;
        to.meta.hiddenHeader = hiddenHeader;
        const params = {
          username: userInfo.loginName,
          password: userInfo.password,
          grant_type: "password"
        };
        api
          .login(qs.stringify(params), { implicitLogin: true })
          .then(res => {
            if (res.success === "false") {
              Message.error(res.msg);
            } else if (res.firstLogin || res.pwExpired) {
              res.firstLogin && Message.warning("初次登录，请修改密码！");
              res.pwExpired && Message.warning("密码过期，请修改密码！");
              store.commit("SET_LOGIN", res);
              router.push("/updatePassword");
            } else {
              store.commit("SET_LOGIN", res);
              store.dispatch("GET_DICT", true); //请求字典接口
              setTimeout(() => {//解决DOM加载先后问题
                router.push({ path: to.path || "/" });
              }, 100);
            }
          })
          .catch(err => {
            Message.error(err);
          });
      }
    },
    false
  );
}

最后效果图: