js 浏览器全屏

谷歌浏览器全屏兼容性

最新推荐文章于 2025-04-01 15:45:39 发布

原创最新推荐文章于 2025-04-01 15:45:39 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

25 篇文章

订阅专栏

本文提供了一段用于实现网页全屏功能的示例代码，并针对谷歌浏览器进行了兼容性处理。通过两个简单的按钮操作，即可实现页面的全屏显示及退出全屏功能。

这篇博文写的比较好，收藏下

https://www.cnblogs.com/javaee6/p/3756249.html

全屏有兼容性问题，这里针对谷歌浏览器举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="fullScreen()">全屏</button>
    <button onclick="exitFullScreen()">退出全屏</button>
    <div style="background:red;width:200px;height:200px" id="box">111</div>
    <script>
        function fullScreen () {
            document.documentElement.webkitRequestFullScreen()
        }
        function exitFullScreen () {
            document.webkitCancelFullScreen()
        }
    </script>
</body>
</html>