在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
    }