vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大

vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大

利用Iframe插入网页

<iframe ref="iframe" src="https://www.taobao.com" frameborder="0" scolling="no"></iframe>

如果出现网页拒绝访问的情况可能与跨域有关，我在一开始的时候使用百度网址也被拒绝访问，后用淘宝网址嵌入成功。frameborder=0是不要边框, scolling="no"是不需要侧边滚动条，如有需要自行修改

---

双击实现iframe内嵌网页的双击放大过程

这个地方在实现过程中出现了很多问题，一开始想使用

this.$refs.iframe.width = document.documentElement.clientwidth
this.$refs.iframe.height = document.documentElement.clientheight

获取页面的值来实现全屏显示，但是后面运行代码时发现无法实现,原因如下:
打开的标签页中不只包含一个页面，iframe指向页面的document.documentElement.clientWidth不再等于浏览器宽度，而是等于iframe的宽度
https://www.cnblogs.com/nov5026/p/4630499.html

---

具体实现

template部分

        <div class="Test">
            <i class="el-icon-plus" @dbclick="fullScreen"></i>
            <iframe ref="iframe" src="https://www.taobao.com" frameborder="0" scolling="no"
              :style="{ width: isFullScreen ? '100%' : width, height: isFullScreen ? '100%' : height, backgroundColor: black }">
            </iframe>
        </div>

data部分

data(){
  return{
    isFullScreen: false,
  }
}

beforedestroy部分

document.removeEventListener('fullscreenchange', this.fullscreenchange)

mounted部分

document.addEventListener('fullscreenchange', this.fullscreenchange)

methods部分

    fullscreenchange(e) {
      if (document.fullscreenElement == null) {
        this.isFullScreen = false
      }
    },
    fullScreen() {
      if (this.isFullScreen) {
        document.webkitCancelFullScreen()
      } else {
        this.$refs.iframe.requestFullscreen()
      }
      this.isFullScreen = !this.isFullScreen
    },

希望自己多多学习，坚持记录问题和解决办法 加油！（这是第一次使用markdown，感觉还不错啊~）