pc端使用vue实现页面全屏和退出全屏

element.requestFullScreen() -- 全屏显示

Element.requestFullscreen()方法用于异步请求使得Element（该元素）全屏显示。 Element.requestFullscreen()不能保证该元素被设置为全屏模式，如果允许该元素进入全屏模式，document将接受到fullscreenchange event事件；如果不允许，则document将接受fullscreenerror event事件。
注意：在调用Element.requestFullScreen()前，可建立 fullscreenchange和fullscreenerror 的事件处理，将方便调试是否成功请求全屏模式。
浏览器的兼容性

chrome（谷歌浏览器、android浏览器） webkitRequestFullScreen()
firefox（火狐浏览器） mozRequestFullScreen() Firefox 44 前的浏览器不允许在<frame>或<object>内的元素请求全屏；在Firefox 44+,允许在顶层document（即body）内的元素或者<iframe>内的元素设置 allowfullScreen属性，则允许请求全屏显示；
IE msRequestFullScreen()
Opera oRequestFullScreen()

document.exitFullSreen() --退出全屏模式

chrome（谷歌浏览器、android浏览器）webkitExitFullScreen()
firefox（火狐浏览器）mozCancleFullScreen()Firefox 44 前的浏览器不允许在<frame>或<object>内的元素请求全屏；在Firefox 44+,允许在顶层document（即body）内的元素或者<iframe>内的元素设置 allowfullScreen属性，则允许请求全屏显示；
IE msExitFullScreen()
Opera oExitFullScreen()

<div @click="handleFullScreen">{{this.fullscreen ? '退出全屏':'全屏'}}
</div>

// js
data() {return {fullscreen: false  // 是否全屏}
},
methods: {// 全屏事件handleFullScreen(){let element = document.documentElement;// 判断是否已经是全屏// 如果是全屏，退出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();}console.log('已还原！');} else {    // 否则，进入全屏if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {// IE11element.msRequestFullscreen();}console.log('已全屏！');}// 改变当前全屏状态this.fullscreen = !this.fullscreen;}
}

Tip：

document.mozFullScreenElement：返回当前文档中正在以全屏模式显示的Element节点，如果没有使用全屏模式，则返回null.

document.mozFullScreenElement - Web API 接口参考 | MDN

vue实现页面全屏和退出全屏相关推荐

vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
vue中如何实现全全全屏和退出全屏？
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂 " 最近总有人给我说ta有社恐,明明是有社牛好不好-- 前言在做大屏界面的时候,客户有个要求,一进去登录成功之后,要有全屏 ...
vue 全屏与退出全屏
vue 全屏与退出全屏实现点击展开全屏或退出全屏首先,安装 npm i screenfull@5 -S 然后在对应组件页面引入screenfull使用 <template><di ...
vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
js实现页面刷新、全屏、退出全屏
刷新 location.reload() 全屏与退出全屏 function fullScreen() {//全屏var de = document.documentElement;if (de.req ...
网页怎么退出全屏,网页退出全屏有哪些快捷键？
网页怎么退出全屏,网页退出全屏有哪些快捷键? 网页怎么退出全屏,网页退出全屏有哪些快捷键? 1.浏览器一般右上角都有个双重小框框即是还原按钮,图标是两个小口. 你点下就不是全屏啦,或者你在浏览器的边框 ...
js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效解决方法 //判断是否是全屏状态 var isFul ...
js全屏事件,进入全屏，退出全屏操作
上面是全面化方案,下面还有个简单的实现功能 1.进入全屏 function launchFullscreen(element) {if (element.requestFullscreen) {ele ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...

vue实现页面全屏和退出全屏

pc端使用vue实现页面全屏和退出全屏

element.requestFullScreen() -- 全屏显示

document.exitFullSreen() --退出全屏模式

vue实现页面全屏和退出全屏相关推荐

最新文章

热门文章