数量词之前做过⼀个项⽬，有⼀个模块涉及到很多的图表和数据，于是项⽬经理要求我写⼀个全屏显⽰的代码，把这个模块在浏览器上进⾏全屏显⽰，从⽽看得更清楚⼀些。
全屏模式可以让web APP拥有本地APP的体验感。 Fullscreen API⽬前并不是所有浏览器都⽀持，所以为了解决兼容性问题，需要在⼀些API上添加前缀。
1. 进⼊全屏模式的API：questFullscreen()
function full(ele) {
if (questFullscreen) {
} else if (RequestFullScreen) {
} else if (ele.webkitRequestFullScreen) {
ele.webkitRequestFullScreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
}
ele指的是某⼀个需要全屏显⽰的元素，可以是document、div等允许可以被全屏显⽰的元素。调⽤此API并不能保证元素⼀定能够进⼊全屏模式。如果元素被允许进⼊全屏幕模式，document对象会收到⼀个事件，通知调⽤者当前元素已经进⼊全屏模式。如果全屏请求不被许可，则会收到⼀个事件（上⾯代码有些screen中的“s”要⼤写）。 在调⽤requestFullscreen()之前，可以在document对象中对 和 事件进⾏监听，这样在请求进⼊全屏模式成功或者失败时都能收到事件通知。
2. 退出全屏模式的API：itFullscreen()
function exitFullscreen() {
itFullScreen) {
} else CancelFullScreen) {
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}
退出全屏直接使⽤document调⽤exitFullscreen⽅法即可。调⽤这个⽅法会让⽂档回退到上⼀个调⽤
⽅法进⼊全屏模式之前的状态。如果⼀个元素A在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素A退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了⼀个全屏元素栈⽤于实现这个⽬的。
3. 获取当前全屏的元素：document.fullscreenElement
function getFullscreenElement() {
return (
烟酒伴侣document.fullscreenElement ||
document.msFullScreenElement ||
document.webkitFullscreenElement||null
);
}
返回的是当前正在全屏的元素的对象。
4. 判断当前是否有元素全屏：document.fullscreen
function isFullScreen() {
return !! (
document.fullscreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
}
如果有元素正在全屏模式，返回true；否则返回false。
5. 判断当前document对象是否可以开启全屏模式：document.fullscreenEnabled
function isFullscreenEnabled() {
return (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled
);
}
如果可以在当前document对象中开启全屏模式，返回true，否则返回false。
6. 事件的处理
document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
7. 事件的处理平台设计方案
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
8. 全屏模式下的样式代码：:fullscreen { }
:
-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
9. 在vue-cli项⽬中的应⽤举例（组件库是iView）：
<template>
<div @click="fullscreen">
<Icon :type="isFullscreen?'md-contract':'md-qr-scanner'" :size="24"/>
</div>
</template>
<script>
export default {
data(){
return{
isFullscreen:false,
}
},
mounted(){
},
厦门园博园简介methods:{
fullscreen(){
let _this=this;
北京空调器厂if (!document.fullscreenElement &&
!FullScreenElement && !document.webkitFullscreenElement) { if (questFullscreen) {
questFullscreen();
_this.isFullscreen=true;
} else if (RequestFullScreen) {
RequestFullScreen();
_this.isFullscreen=true;
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
_this.isFullscreen=true;
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
_this.isFullscreen=true;
}
} else {
if (itFullscreen) {
_this.isFullscreen=false;
} else if (CancelFullScreen) {
_this.isFullscreen=false;
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
_this.isFullscreen=false;
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
步菲烟_this.isFullscreen=false;
}
}
}
}
}
</script>
<style lang="less">
</style>
10. 参考⽂献：
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议