前端js实现网页或元素全屏、退出全屏、切换全屏状态的代码

转载已于 2024-10-14 11:22:30 修改 · 2.5k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.ivan-hanloth.cn/archives/608/

Ivan Hanloth

关注

标签

#前端 #javascript #开发语言

分类前端开发

代码可运行

于 2023-11-09 20:44:26 首次发布

本文介绍了如何在翰络云工具中添加全屏切换功能，涉及requestFullscreen()和相应浏览器前缀，以及退出全屏的exitFullscreen()方法。提供了一个toggleFullScreen函数示例，用于在不同浏览器环境下操作元素的全屏状态。

最近想给翰络云工具加个切换元素全屏的功能，于是查了一下相关的资料，整理了一下

基础API

实现元素全屏或者网页全屏的基础API是 requestFullscreen()，不过针对不同浏览器需要添加不同的前缀，也就有了 mozRequestFullScreen() 、webkitRequestFullScreen()等方法

退出全屏的基础API是 exitFullscreen()，和前面一样，不同浏览器的实现方法不同，具体不再赘述，直接上代码

自动切换元素全屏状态

function toggleFullScreen(e){
    if(document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ? 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 (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();
        }

    }
}

使用方法

直接调用 toggleFullScreen()

参数：需要全屏/退出全屏的Dom对象

举例：

toggleFullScreen(document.getElementById("element"))

转载自 IvanHanloth的博客