vue中使用iframe嵌入網(wǎng)頁,頁面可自適應問題

更新時間：2022年09月13日 09:22:56 作者：beijixing333y

這篇文章主要介紹了vue中使用iframe嵌入網(wǎng)頁,頁面可自適應問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用iframe嵌入網(wǎng)頁,頁面可自適應

在項目中遇到要嵌入第三方網(wǎng)頁的需求，因為沒有同第三方頁面交互的需求，只需展示即可，所以最終決定使用 iframe 將第三方的網(wǎng)頁嵌入到系統(tǒng)中，并且做到自適應效果。

考慮到以后可能會增加嵌入頁面的數(shù)量，故而封裝成組件，供以后復用：

上圖為系統(tǒng)整體結(jié)構圖，需要在內(nèi)容區(qū)內(nèi)展示 iframe 的內(nèi)容，并且做到自適應。

整體代碼如下：

<template>
  <div class="iframe-container">
    <iframe id="iframeContainer" :src="iframeUrl" frameborder="0" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
 
export default {
  name: 'IframeContainer',
  props: {
    iframeUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  watch: {
    'sidebar.opened': {
      handler: function() {
        this.initIframe()
      },
      immediate: true
    }
  },
  mounted() {
    this.initIframe()
 
    window.onresize = () => {
      this.initIframe()
    }
  },
  methods: {
    initIframe() {
      const iframeContainer = document.getElementById('iframeContainer')
      const deviceWidth = document.body.clientWidth
      const deviceHeight = document.body.clientHeight
      iframeContainer.style.width = this.sidebar.opened ? (Number(deviceWidth) - 293) + 'px' : (Number(deviceWidth) - 71) + 'px'
      iframeContainer.style.height = (Number(deviceHeight) - 110) + 'px'
    }
  }
}
</script>

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

要確保嵌入的頁面做到自適應的效果，首先保證 iframe 是自適應的，此處關鍵代碼：

動態(tài)計算 iframe 的寬度和高度，計算時需要減去側(cè)邊欄寬度、內(nèi)容區(qū) padding、頂部導航高度等。

監(jiān)聽窗口大小改變事件，觸發(fā) iframe 寬度高度計算方法，重新為 iframe 設置寬度和高度：

如果系統(tǒng)側(cè)邊欄或者頂部導航是可收縮的，還需監(jiān)聽收縮事件，進而改變 iframe 高度和寬度：

此處監(jiān)聽 sidebar 的展開狀態(tài)，在此不做過多贅述。

vue iframe高度自適應實用

iframe是vue的，在使用過程中高度根據(jù)數(shù)據(jù)實時變化，不好設置iframe的高度值。試了多種方式之后，總結(jié)了幾種自適應的方式。

實時刷新iframe高度變化

var iframes = document.getElementsByTagName('iframe');
setInterval(function() {
? ? for (var i = 0, j = iframes.length; i < j; ++i) { ? ? ? ??
? ? ? ? iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight);
? ? }
}, 1000);

iframe高度有變的時候通知父級

// iframe
this.$nextTick(()=>{
? parent.window.iframeChangeHeight()
})

// 父級
function iframeChangeHeight(){
?var iframes = document.getElementsByTagName('iframe');
?for (var i = 0, j = iframes.length; i < j; ++i) {
? ? iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight);
?}
}

iframe高度有變的時候直接修改iframe高度

function iframeChangeHeight(){
? let iframes = window.parent.document.getElementsByTagName('iframe');
? for (var i = 0, j = iframes.length; i < j; ++i) {
? ? iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight)
? }
},

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: