iframe 應用

經過 iframe 標籤，能夠實如今頁面打開新頁面功能。
因此，如今經過 iframe 實現，在頁面打開 某個h5 遊戲頁面

<div class="iframeShow">
    <iframe
        id="iframe"
        :src="gameUrl"
        allowfullscreen= true
        >
    </iframe>
</div>

注意，有些地址會出現跨域問題，這須要修改 nginx 配置。
iframe 能夠配置 width 和height。可是，由於不一樣頁面的尺寸不同，因此，須要進行動態修改

getIframe () {
      this.$nextTick(() => {
        var obj = document.getElementById('iframe')
        console.log('scrollWidth ', obj.scrollWidth, 'clientWidth ', obj.clientWidth)
        console.log('scrollHeight ', obj.scrollHeight, 'clientHeight ', obj.clientHeight)
        obj.style.width = 'calc((100vh - 96px) * .5625)'
        obj.style.height = `calc(85vh + ${obj.clientHeight / 2}px)`
      })
    }

補充：
scrollWidth
是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。
clientWidth
是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變。
offsetWidth
是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。