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

您所在的位置：网站首页 › 浏览器不是全屏怎么办呢手机 › JS 实现开启全屏和退出全屏

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

2024-07-14 04:06| 来源: 网络整理| 查看: 265

起因

有个非常奇怪的问题，在 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); } }); })();

【本文地址】

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

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

今日新闻

推荐新闻