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

Author： Ivan Hanloth
发布时间：November 9, 2023
738 views
No comments
1412 words
Categories：技术分享博文

Loading...

最近想给[翰络云工具](https://www.hanloth.cn/)加个切换元素全屏的功能，于是查了一下相关的资料，整理了一下

# 基础API

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

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

# 自动切换元素全屏状态

```javascript

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对象

举例：

```javascript
toggleFullScreen(document.getElementById("element"))
```

Last modification：November 9, 2023

© Allow specification reprint

如果觉得我的文章对你有用，请随意赞赏

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Comment *

Private comment

Name *

🎲

Email

Site