博客

前言：

开发中遇到点击让iframe全屏的需求，代码如下

     
 <template>
  <div>
	 <a-button type="primary" @click="screen">全屏</a-button>
    <iframe
      :src="url"
      frameborder="0"
      height="700px"
      width="100%"
      longdesc="请刷新页面"
      id="con_lf_top_div"
      allowfullscreen="true"
    ></iframe>
  </div>
 </template>
<script>
 export default {
  data() {
    return {
      //  地址
      url: '',
      //记录是否全屏
      fullscreen: false,
    }
  },
  methods: {
    //全屏方法
    screen() {
      //设置后就是id==con_lf_top_div 的容器全屏
      let case= document.getElementById('con_lf_top_div')
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (case.requestFullscreen) {
          case.requestFullscreen()
        } else if (case.webkitRequestFullScreen) {
          case.webkitRequestFullScreen()
        } else if (case.mozRequestFullScreen) {
          case.mozRequestFullScreen()
        } else if (case.msRequestFullscreen) {
          // IE11
          case.msRequestFullscreen()
        }
      }
    },
  },
}
</script>