使用iframe嵌套vue项目，并进行通信

近期项目需要，甲项目需要嵌套我们项目（乙项目）的一个页面。被嵌套页面不显示侧边菜单、不显示水平菜单，并且在进行相关操作后，乙项目向甲项目发送消息，话不多说，直接上代码：

---

1、甲项目（父页面）

<template>
	<iframe
		width="1400"
        height="600"
        id="egoist"
        :src="iframeUrl"
        trameborder="0"
        ref="iframe"
        >
     </iframe>
</template>

<script>
export default {
	data() {
		return {
			iframeUrl: '' // 这里是乙项目页面地址，可能会根据测试、预生产、生产环境变化
		}
	},
	mounted() {
    	window.addEventListener('message', function(e) {
      		// console.log('父页面接收子页面内容', e.data)
      		// 接收到子页面消息，进行相关操作
    	}, false)
  	},
	created() {
		this.getIframe()
	},
	methods: {
		getIframe() {
      		// 1、 这里是直接将去到子页面需要用到的token，携带直接跳到目标页面，在目标页面进行登录后，去到目标页面
            let iframeToken= await this.$user.getToken()
            this.iframeUrl = 'https://hhhh.net/test/mine' + '?iframeToken=hhhhh'
            // 2、 这里将token以消息方式传递给子页面
            // let param = {
            //   token
            // }
          	// this.$refs.iframe.contentWindow.postMessage(param,'*')}
 	}
}
</script>

---

2、乙项目（子页面，被嵌套的页面）
（1）在项目中路由守卫，进行登录处理的地方，处理携带iframeToken的登录以及跳转

router.beforeEach(async(to, from, next) => {
	NProgress.start()
	if (有token) {
		// 登录了的相关处理
		// 获取用户信息之类
	} else {
		const query = to.query
      	const path = to.path
      	// 如果是嵌入页面携带token
		if (query.iframeToken) {
			const ssoToken = query.iframeToken
        	store.dispatch('SSOLogin', ssoToken).then(() => {
          		next({ path: to.path })
        	}).catch(() => {
        	// sso登录失败的处理
          	//const { jti, exp } = JSON.parse(window.atob(ssoToken.split('.')[1]))
          	// axios.post(window.location.protocol + '//' + process.env.SSO_LOGOUT_URL, {
            // 		jti,
            // 		exp
          	// }).finally(() => {
          })
        })
      }
	}
})

(2)状态管理中判断，页面是否以嵌套形式出现，这里是放在store/modules/app.js下:

state: {
    // 是否以系统内嵌的方式呈现
    isIframe: !(window.top === window.self)
}

(3)、 页面中进行数据传递（此路径下的页面/test/mine）

<template>
	<button v-if="isIframe" @click="sendMes">点击发送消息</button>
	// 也可以使用isIframe控制侧边菜单、水平菜单
</template>

<script>
export default {
	data() {
		return {}
	},
	mounted() {
    	window.addEventListener('message', function(e) {
      		// console.log('接收父页面内容', e.data)
    	}, false)
  	},
  	computed: {
		isIframe() {
        	return this.$store.state.app.isIframe
      	}
	},
	created() {},
	methods: {
		sendMes() {
      		if (this.isIframe) {
      			window.parent.postMessage({
					data: {
						id: order.orderId,
						tag: order.status
					}
				}, '*')
			}
 	}
}
</script>

以上是在项目中的相关处理，有待完善。。。