vue实现点击让对应的iframe全屏

  • Post author:
  • Post category:vue




前言:



开发中遇到点击让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>



版权声明:本文为Ride_The_Wind原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。