Web页面进入全屏退出全屏

吞掉星星的鲸鱼

于 2024-05-22 17:35:50 发布

阅读量278

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/m0_51534164/article/details/139125505

版权

进入全屏

document.documentElement.requestFullscreen
这是Fullscreen API的标准、无前缀的方法，用于让元素（在这里是整个文档根元素）进入全屏模式。大多数现代浏览器支持这个无前缀的API。
document.documentElement.mozRequestFullScreen
这是Mozilla Firefox浏览器早期实现Fullscreen API时所使用的前缀方法。"moz" 前缀是Firefox特有的。随着标准的成熟，现代版Firefox也支持无前缀的requestFullscreen，但这个属性可用于向后兼容旧版Firefox。
document.documentElement.webkitRequestFullscreen
这是WebKit引擎（主要用于早期的Chrome和Safari浏览器）实现Fullscreen API时所使用的前缀方法。虽然现在Chrome和Safari也都支持无前缀的标准方法，这个前缀版本在某些较旧或特定版本的浏览器中可能仍然需要。
document.documentElement.msRequestFullscreen
这是Microsoft Internet Explorer和Microsoft Edge早期版本中用于进入全屏模式的方法，带"ms"前缀，表示这是微软（Microsoft）特定的实现。随着Edge转向Chromium内核，新版本Edge也广泛支持无前缀的标准方法，但这个属性可用于兼容老版本的IE或Edge浏览器。

代码示例

                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen();
                } else if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen();
                }

退出全屏

对于 document.documentElement.requestFullscreen，相应的退出全屏方法为 document.exitFullscreen()。
对于 document.documentElement.mozRequestFullScreen（Firefox 特有的），退出全屏的方法是 document.mozCancelFullScreen。
对于 document.documentElement.webkitRequestFullscreen（主要针对旧版 Chrome 和 Safari），退出全屏的方法是 document.webkitExitFullscreen。
对于 document.documentElement.msRequestFullscreen（适用于旧版 IE 和 Edge），退出全屏的方法是 document.msExitFullscreen。

代码示例

                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }