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

Posted 2023-05-01

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

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

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

子页面

VUE使用screenfull实现全屏

简介

点击某按钮实现页面全屏 按下 Esc 键退出全屏 IE9以下无需兼容

 

安装

### 使用 npm 或 yarn 安装

npm install --save screenfull

 

使用

### 1.在需要使用的页面中引入

import screenfull from ‘screenfull‘

### 2.定义方法实现全屏

      clickFullscreen(){
        if (!screenfull.isEnabled) {
          this.$message({
            message: ‘you browser can not work‘,
            type: ‘warning‘
          })
          return false
        }
        screenfull.toggle()
      }

### 3.按钮调用方法

 

官方地址

GitHub：https://github.com/sindresorhus/screenfull.js/

 

 

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢