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>