vue配置iframe父级窗口通信
在router/index.js中配置
export default new Router({
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
name: 'index',
component: resolve => require(['@/views/index'], resolve),
meta: {
keepAlive: true, // 此组件需要被缓存
isIframe: true // 标记是否是iframe
}
}
]
})在入口文件main.js中配置
// 判断当前路由是否需要iframe
router.beforeEach((to, from, next) => {
if (to.meta.isIframe) {
window.parent.postMessage({
type: 'setIframeHeight',
height: document.documentElement.scrollHeight
}, '*')
}
next()
})在父页面中添加
<script>
window.addEventListener('message', function (e) {
if (e.data.type === 'setIframeHeight') {
document.querySelector('#iframe').height = e.data.height
}
})
</script>