控制全屏和取消全屏文件proFn.js
class Profn{
constructor(vue,obj){
}
}
// 设置 全屏
Profn.fullPage = function (element) {
//某个元素有请求
var requestMethod =element.requestFullScreen
||element.webkitRequestFullScreen //谷歌
||element.mozRequestFullScreen //火狐
||element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element); //执行这个请求的方法
} else if (typeof window.ActiveXObject !== "undefined") { //window.ActiveXObject判断是否支持ActiveX控件
//这里其实就是模拟了按下键盘的F11,使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
if (wscript !== null) { //创建成功
wscript.SendKeys("{F11}");//触发f11
}
}
};
//取消全屏
Profn.cancelFullpage = function (element) {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
export {Profn}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html:
<div class="screen" @click="changeScreen" v-show="!this.$route.meta.hiddenFullScreen">
<img v-show="!fullPageBool" src="../assets/images/icon/fullScreen.png" alt="">
<img v-show="fullPageBool" src="../assets/images/icon/quitScreen.png" alt="">
</div>
mounted:
//监听f11的全屏,f11关闭全屏,无法监听到
let that=this
window.addEventListener('keydown', function (event) {
let e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode == 122){//捕捉F11键盘动作
e.preventDefault(); //阻止F11默认动作,自行定义全屏事件,否则f11全屏后,h5的全屏api失效
let el = document.documentElement;
let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if(typeof window.ActiveXObject != "undefined"){
let wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {//执行全屏
wscript.SendKeys("{F11}");
}
}
//监听不同浏览器的全屏事件,并件执行相应的代码
document.addEventListener("webkitfullscreenchange", function() {
if (document.webkitIsFullScreen) {
//全屏后要执行的代码
that.fullPageBool=true
}else{
//退出全屏后执行的代码
that.fullPageBool=false
}
}, false);
document.addEventListener("fullscreenchange", function() {
if (document.fullscreen) {
//全屏后执行的代码
that.fullPageBool=true
}else{
//退出全屏后要执行的代码
that.fullPageBool=false
}
}, false);
document.addEventListener("mozfullscreenchange", function() {
if (document.mozFullScreen) {
//全屏后要执行的代码
that.fullPageBool=true
}else{
//退出全屏后要执行的代码
that.fullPageBool=false
}
}, false);
document.addEventListener("msfullscreenchange", function() {
if (document.msFullscreenElement) {
//全屏后要执行的代码
that.fullPageBool=true
}else{
//退出全屏后要执行的代码
that.fullPageBool=false
}
}, false)
}
})
methods:全屏与否切换事件
changeScreen(){
let $window = document.documentElement;
if(!this.fullPageBool){
Profn.fullPage($window);
}else{
Profn.cancelFullpage($window)
}
this.fullPageBool = this.fullPageBool ? false :true;
},
注意:
js可以监听到键盘的f11事件,可以对它进行干预,然后自定义全屏事件,但是无法监听浏览器的全屏事件,所以,不要再设置里面点击全屏,否则,自己定义的全屏事件会失效。
有想过使用window.onresize监听,但是改变浏览器窗口都会触发,不一定是全屏才触发,所以,无法判断是不是全屏从而改变全屏属性。所以最后是只能不在这里改变全屏模式。如果有更好的实现方式,请路过的大佬留言。