Loading... ## 前言 博主前不久去机场接朋友,自己写了一个接机的小工具,并上线到了翰络云工具上:[接机牌](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 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 4 如果觉得我的文章对你有用,请随意赞赏