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

起因

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

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

Element.requestFullscreen() 和 Document.exitFullscreen()

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

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

在调用 requestFullScreen() 之前也可监听 fullscreenchange 和 fullscreenerror 事件来处理成功或失败。可以查看 MDN 对 requestFullscreen、exitFullscreen 的介绍。

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

函数封装

requestFullscreen 和 exitFullscreen 有一些兼容性问题，所以还是封装成一个函数来调用。

是否全屏

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

进入全屏

// 进入全屏
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'));

退出全屏

// 退出全屏
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。😏

// ==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);
        }
    });
})();