JS 实现开启全屏和退出全屏

起因

有个非常奇怪的问题,在 MacOS 系统的浏览器,F11 是显示桌面而不是全屏。

通过菜单 视图 - 进入全屏幕 或快捷键 Command + Ctrl + F 进入全屏幕时又要调整书签栏和工具栏。😔

Element.requestFullscreen() 和 Document.exitFullscreen()

requestFullscreen 发出异步请求使元素进入全屏模式。注意 Element,是任何 DOM 元素都能进入全屏模式!

而方法 exitFullscreen 让当前文档退出全屏模式。注意是 Document,而不是调用 requestFullscreen 进入全屏模式的 DOM 元素!

在调用 requestFullScreen() 之前也可监听 fullscreenchangefullscreenerror 事件来处理成功或失败。可以查看 MDN 对 requestFullscreenexitFullscreen 的介绍。

需要注意的是,在进入全屏后刷新会退出全屏模式。

函数封装

requestFullscreenexitFullscreen 有一些兼容性问题,所以还是封装成一个函数来调用。

是否全屏

1
2
// 是否全屏
const isFullScreen = document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen;

进入全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 进入全屏
const requestFullscreen = (el = null) => {
const ele = el || document.documentElement;
const rfs = ele.requestFullscreen || ele.webkitRequestFullscreen || ele.mozRequestFullScreen || ele.msRequestFullscreen;

// 如果全屏,返回
if (isFullScreen) return;

if (rfs) {
rfs.call(ele);
} else if (typeof window.ActiveXObject !== 'undefined') {
const wscript = new ActiveXObject('WScript.Shell');
if (wscript) {
wscript.SendKeys('{F11}');
}
}
};

// 例子 1:整个网页全屏
requestFullscreen();
// 例子 2:视频部分全屏
requestFullscreen(document.querySelector('#video'));

退出全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 退出全屏
const exitFullscreen = () => {
const ele = document;
const efs = ele.exitFullscreen || ele.webkitExitFullscreen || ele.mozCancelFullScreen;

// 如果不是全屏,返回
if (!isFullScreen) return;

if (efs) {
efs.call(ele);
} else if (typeof window.ActiveXObject !== 'undefined') {
const wscript = new ActiveXObject('WScript.Shell');
if (wscript) {
wscript.SendKeys('{F11}');
}
}
};

油猴脚本

我的目的是为了能在 MacOS 系统上按快捷键全屏!怎么整了这么多代码呢!好吧,下面来个完整版的脚本,因为我发现 F11 的显示桌面还挺好用的,所以我把快捷键设置成了 F2。😏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// ==UserScript==
// @name MacOS F2 全屏
// @namespace https://blog.wanghaida.com/
// @version 0.1
// @description F2 进入全屏,F2/ESC 退出全屏。
// @author haaid
// @include *
// ==/UserScript==

(function() {
'use strict';

// 快捷键
const key = 'F2';

document.addEventListener('keydown', (event) => {
if (event.key !== key) return;

const isFullScreen = document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen;

if (isFullScreen) {
const ele = document;
const efs = ele.exitFullscreen || ele.webkitExitFullscreen || ele.mozCancelFullScreen;

efs && efs.call(ele);
} else {
const ele = document.documentElement;
const rfs = ele.requestFullscreen || ele.webkitRequestFullscreen || ele.mozRequestFullScreen;

rfs && rfs.call(ele);
}
});
})();