js实现页面全屏

最新推荐文章于 2025-08-08 10:21:58 发布

原创最新推荐文章于 2025-08-08 10:21:58 发布 · 2.8k 阅读

7 ·

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

收录于

javascript

通过JavaScript的element.requestFullscreen()方法可以实现页面元素全屏显示。当调用此方法并成功时，会触发fullscreenchange事件，失败则触发fullscreenerror事件。

js实现全屏显示、需要用到 element.requestFullscreen()方法，该方法是用来发出异步请求使元素(element)进入全屏模式，如果成功，该元素会触发fullscreenchange；如果失败，则会触发fullscreenerror事件；

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #fullscreenElement{
                width: 100px;
                height:100px;
                background: #f00;
            }
        </style>
    </head>
    <body>
        <div id="fullscreenElement" onclick="openFullscreen(this)">
            <button onclick="exitFullScreen()">退出全屏</button>
        </div>
    <script type="text/javascript">
        document.querySelector('#fullscreenElement').onclick = function(){
            var element=this;
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullScreen();
            }
        }
    //退出全屏方法
    function exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
        </script>
    </body>
</html>

标签

#js使页面全屏