iframe 应用

通过 iframe 标签,可以实现在页面打开新页面功能。
所以,现在通过 iframe 实现,在页面打开 某个h5 游戏页面

注意,有些地址会出现跨域问题,这需要修改 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
是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。

你可能感兴趣的:(javascriptcss)