vue+iframe实现点击F11全屏效果

在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏。目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持
父页面

<iframe 
  :src="screenUrl" 
  frameborder='0' 
  allowfullscreen="true" 
  scrolling="no" 
  width="100%" 
  height="100%"
>
</iframe>

如果是Iframe嵌套内容，只需要在iframe中加入属性

allowFullScreen = true

当然，如果是iframe多层嵌套，需要给每一层都加上该属性

子页面

HTML 

  <div class="top-left" @click="FullScreen" ></div>

js

  FullScreen () {
    if (this.FullScreenState == false) {
      // 全屏
      let de = document.documentElement
        if (de.requestFullScreen) {                   // W3C 
            de.requestFullscreen()
        } else if (de.mozRequestFullScreen) {          // FireFox 
            de.mozRequestFullScreen()
        } else if (de.webkitRequestFullScreen) {       // Chrome等 
            de.webkitRequestFullScreen()
        } else if (de.msRequestFullscreen) {          // IE11
            de.msRequestFullscreen();
         }
        this.FullScreenState = true
    } else {
        // 退出全屏
        let de = document
        if (de.exitFullscreen) {
            de.exitFullscreen()
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullscreen()
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullscreen()
        }
        this.FullScreenState = false
    }