JS实现页面全屏功能

最新推荐文章于 2025-06-03 09:07:40 发布

原创

最新推荐文章于 2025-06-03 09:07:40 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="fullScreenDiv" style="width: 100px; height: 100px; background-color: #0AD4EC">
    <input type="button" value="全屏" onclick="enterFullscreen()"/>
    <input type="button" value="退出" onclick="exitFullscreen()"/>
</div>
</body>

<script type="text/javascript">
    // 全屏操作类
    function FullScreen() {
        this.requestFullscreenFunName = null;
        this.exitFullscreenFunName = null;
        this.supprotFullScreen = false;

        let body = document.body;
        if (typeof body.requestFullscreen === 'function') {
            this.requestFullscreenFunName = 'requestFullscreen';
        } else if (typeof body.mozRequestFullScreen === 'function') {
            this.requestFullscreenFunName = 'mozRequestFullScreen';
        } else if (typeof body.msRequestF