适配所有浏览器的原生js进入/退出全屏代码看这里（Safari可用！！）>>

Author： Ivan Hanloth
发布时间：June 29, 2024
462 views
No comments
3196 words
Categories：技术分享博文

## 前言

博主前不久去机场接朋友，自己写了一个接机的小工具，并上线到了翰络云工具上：[接机牌](https://www.hanloth.cn/tool/pickup-card)，并改出了一个[手持弹幕](https://www.hanloth.cn/tool/danmu-in-hand)。分享给朋友之后他告诉我，没办法全屏。可是我的所有设备显示都是正常的啊，一问，原来是safari手机版。到Caniuse网站上一查发现，我原先使用的Webapi不支持safari（准确的说是只有手机版的safari不支持）。为了方便后续使用，写了一个专门的函数并在此记录留作备份。

## 涉及到的WebAPI

* 进入全屏：`requestFullscreen()`
* 退出全屏：`exitFullscreen()`

严格来说不止这两个，还有加上各个浏览器的前缀的函数：

| 浏览器  | 进入全屏                    | 退出全屏                   |
| --------- | ----------------------------- | ---------------------------- |
| Chrome  | `webkitRequestFullScreen()` | `webkitCancelFullScreen()` |
| FireFox | `mozRequestFullScreen()`    | `mozCancelFullScreen()`    |
| IE11    | `msRequestFullscreen()`     | `msExitFullscreen()`       |

调用方式：`需要全屏的DOM元素（可以是document）.全屏函数`

调用举例：`document.requestFullscreen()`

## 实现步骤

其实知道api之后就很简单了，对于支持全屏API的浏览器，只需要在需要全屏的时候调用对应浏览器的api即可。比较麻烦的是对safari的适配。

其实所谓全屏就是将对应的元素放在最前面，铺满整个屏幕即可（当然，如果你非要说全屏需要隐藏导航栏……那当我没说），因此只需要对应元素的样式进行修改，并加上键盘监听事件来完成退出即可。

## 完整代码

嗯，~~白嫖的人~~聪明的人会选择从这里开始看：

```js
function toggleFullScreen(e) {
    if (document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.userDefinedFullscreenElement ? true : false) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.userDefinedFullscreenElement) {
            document.userDefinedFullscreenElement = null;
            document.styleSheets[0].deleteRule(".UserDefinedFullscreenElement");
            e.className = e.className.replace(" UserDefinedFullscreenElement", "");
            window.removeEventListener("keydown", function (ev) {
                if (ev.key === "Escape") {
                    toggleFullScreen(e);
                }
            });

}
    } else {
        if (e.requestFullscreen) {
            e.requestFullscreen();
        }/*FireFox */ else if (e.mozRequestFullScreen) {
            e.mozRequestFullScreen();
        }/*Chrome等 */ else if (e.webkitRequestFullScreen) {
            e.webkitRequestFullScreen();
        }/*IE11*/ else if (e.msRequestFullscreen) {
            e.msRequestFullscreen();
        }/* 适配safari */else {
            document.styleSheets[0].insertRule(".UserDefinedFullscreenElement{position:fixed !important;top:0px !important;left:0px !important;height:100% !important;width:100% !important;z-index:9999999 !important;}");
            document.userDefinedFullscreenElement = e;
            e.className += " UserDefinedFullscreenElement";
            window.addEventListener("keydown", function (ev) {
                if (ev.key === "Escape") {
                    toggleFullScreen(e);
                }
            });
        }

}
}
```

其中，参数e为需要全屏的DOM对象，可以为document，也可以是通过document.getElement系列函数获取到的元素等。首次调用进入全屏，再次调用退出全屏。

Last modification：June 29, 2024