iframe解决方案

为了更好的用户体验，尤其是在iframe高度上，可以采用 iframe-resizer这个插件

安装

npm install iframe-resizer@4.3.1 -S

子页面引入文件

📎iframeResizer.contentWindow.min.js

封装指令

// directives/iframeResize.js
import iframeResize from 'iframe-resizer/js/iframeResizer'

export default {
  beforeMount: (el, { value = {} }) => {
    el.addEventListener('load', () => iframeResize(value, el))
  },
  unmounted: (el) => {
    el.iFrameResizer.removeListeners()
  }
}

// index.js
import iframeResize from './iframeResize'
app.directive('resize', iframeResize)

页面应用

<template>
  <div class="iframe-wrapper">
    <iframe
      v-resize="iFrameResizer"
      id="Iframe"
      width="100%"
      :src="url"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { jumpOtherSSO } from '@/utils/sso/sso'
import { openFunc } from '@/utils/util'
export default {
  name: 'AppCenter',
  data () {
    return {
      iFrameResizer: {
        log: false,
        heightCalculationMethod: 'lowestElement',
        warningTimeout: 0
      },
      ssoUrl: ''
    }
  },
  mounted () {
    // this.updateIframeHeightFunc()
    if (this.isUserLogin) {
      jumpOtherSSO('appCenter', { page: 1 }).then(res => {
        this.ssoUrl = res.data
      }).catch(() => {
        this.ssoUrl = this.$route.query.url
      })
    }
    window.addEventListener('message', (e) => {
      if (e.data.appId) {
        const routeData = this.$router.resolve({
          name: this.$routerNameMap.appCenterDetails,
          query: {
            url: xxx`,
            id: e.data.appId
          }
        })
        openFunc(routeData.href)
      }
    })
  },
  computed: {
    ...mapGetters(['isUserLogin']),
    url () {
      return !this.isUserLogin ? this.$route.query.url : this.ssoUrl
    }
  },
  methods: {
    updateIframeHeightFunc () {
      const oIframe = document.getElementById('Iframe')
      const deviceHeight = document.documentElement.clientHeight + 2360
      oIframe.style.height = `${deviceHeight}px`
    }
  }
}
</script>

<style lang="scss" scoped>
.iframe-wrapper {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>