https://cloud.tencent.com/developer/article/2329582#
实现全屏
const element = document.getElementById('my-element');
var res;
if (element.requestFullscreen) {
res = element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
res = element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
res = element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // Internet Explorer and Edge
res = element.msRequestFullscreen();
}
此处的res是个异步函数 promise 对象
正常可以用res.then(func(){}) 执行下一步
但如果有异常 则只能用res.catch(func) 执行响应
火狐浏览器下F11按的太快会偶尔出现异常：
请求全屏已拒绝，Element.requestFullscreen() 不是从短期运行的用户生成的事件处理函数中调用。
谷歌浏览器尚未发现。
退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // Internet Explorer and Edge
document.msExitFullscreen();
}
监听全屏
$(document).on("keydown", function (e) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 122) {
//捕捉F11键盘动作
e.preventDefault(); //阻止F11默认动作
var el = document.documentElement;
var rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullScreen; //定义不同浏览器的全屏API //执行全屏
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
const weListenScreen = function () {
if (document.webkitIsFullScreen) {
//全屏后要执行的代码
callFull();
} else {
//退出全屏后执行的代码
document.removeEventListener("webkitfullscreenchange",weListenScreen);
callCloseFull();
}
};
const fuListenScreen = function () {
if (document.fullscreen) {
//全屏后要执行的代码
callFull();
} else {
//退出全屏后执行的代码
document.removeEventListener("fullscreenchange", fuListenScreen);
callCloseFull();
}
};
const moListenScreen = function () {
if (document.mozFullScreen) {
//全屏后要执行的代码
callFull();
} else {
//退出全屏后执行的代码
document.removeEventListener("mozfullscreenchange", moListenScreen);
callCloseFull();
}
};
const msListenScreen = function () {
if (document.msFullscreenElement) {
//全屏后要执行的代码
callFull();
} else {
//退出全屏后执行的代码
document.removeEventListener("msfullscreenchange", msListenScreen);
callCloseFull();
}
}; //监听不同浏览器的全屏事件，并件执行相应的代码
document.addEventListener("webkitfullscreenchange",weListenScreen,false);
document.addEventListener("fullscreenchange", fuListenScreen, false);
document.addEventListener("mozfullscreenchange", moListenScreen, false);
document.addEventListener("msfullscreenchange", msListenScreen, false);
}
});
或者
//
//此窗口事件会捕获到F11的开启，捕获不到F11的二次取消；可以捕获到弹窗内部手动的全屏和取消；
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Chrome, Safari and Opera
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // Internet Explorer and Edge
function handleFullscreenChange() {
if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
console.log('进入全屏模式');
} else {
console.log('退出全屏模式');
}
}
这个js的使用说明与避坑（不要小看它，很难用！）
测试环境：火狐浏览器
我的使用场景：在设备列表，点击设备，设备的弹窗右上角会有全屏按钮。
当点击这个全屏时，用以上js方法控制全屏变化。
这一步很正常，没毛病。
流程：在弹窗内部定义全屏的接口，由外部调用，全屏的事件交给弹窗内部执行。
监听交给全局去做。
为什么需要全局去监听全屏变化：
因为当你弹窗没有全屏，而选择使用键盘的F11按下全屏时，这时候：
第1个注意的点：需要手动唤起弹窗开启全屏的，而在召唤弹窗内部的全屏事件时，就需要考虑当前是否全屏，如果已经全屏，不用再操作全屏，只微调改变弹窗内部的排版即可。
第2个注意的点：在当你想再次使用F11取消刚才的F11的全屏状态时，不好意思，js监听不到F11的按键取消事件的，所以在此我们可以确定监听keydown事件只是作为外部主动召唤弹窗全屏的接口，其次需要监听全屏变化事件即可，捕获到屏幕发声变化时，主动去判断这个全屏的动作是否由弹窗发出的，起名变量：fullScreenFromBoxTime，为什么要几个time，因为弹窗内部点击的全屏按钮到这里的监听到，会间隔0.1-0.5秒。 所以只要这个间隔小于(1~1.5)秒，就可以判断这个全屏的变化是由F11触发的！如果确定了是F11触发的，则找到弹窗，让它主动去切换全屏即可，所以全屏事件其实是在弹窗内部执行。
第3个注意点：
当用户F11缩小全屏后在0.5秒内立刻再F11会报错：
请求全屏已拒绝，Element.requestFullscreen() 不是从短期运行的用户生成的事件处理函数中调用。
拦截方法在上面的res对象处理响应即可
//按下F11时 需要主动全屏；但并不能通过此处捕获到取消全屏的动作
$(document).on("keydown", function (e) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 122) {
//捕捉F11键盘动作
e.preventDefault(); //阻止F11默认动作
var maxBox = getLastBox();
if(maxBox && maxBox.toggleFull) {
//这里是手动全屏，所以要存储全屏来自弹窗内部的变量和时间，防止被监听到全屏变化，再次触发窗口全屏的死循环。
if(maxBox.isFull==0) {
localStorage.setItem('devDetailsFullFromInner', now());
maxBox.toggleFull();
}
}
}
});
监听全屏变化事件
//此监听事件会捕获到F11的开启，捕获不到F11的取消动作；可以捕获到弹窗内部手动的全屏和取消；
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Chrome, Safari and Opera
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // Internet Explorer and Edge
var now = function () {
return new Date().getTime()/1000;
};
function handleFullscreenChange() {
if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
console.log('进入全屏模式');
} else {
console.log('退出全屏模式');
}
//只有监听到的变化 不来自F11时 才能触发全屏改变；反之可能是由弹窗内部的全屏按钮点击触发的
//如果窗口全屏切换不是来源于黑色弹窗，则可以触发黑色弹窗
console.log("localStorage.getItem('devDetailsFullFromInner')", now()-localStorage.getItem('devDetailsFullFromInner'));
if(now()-localStorage.getItem('devDetailsFullFromInner') >1.2) {
callBoxFullEven();
}
//每次执行完 要释放之前的时间，因为F11取消全屏会立即执行，假设刚全屏完，想立刻取消全屏，则会被此处拦截。
localStorage.setItem('devDetailsFullFromInner', 0);
}
一个js的使用需要了解它的缺点和硬伤，才能避免出现不必要的调试和掉头发。