浏览器全屏效果

最新推荐文章于 2022-09-02 17:19:50 发布

weixin_30677617

最新推荐文章于 2022-09-02 17:19:50 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fifteen718/p/9533962.html

本文介绍了一种使用HTML和JavaScript实现网页全屏显示的方法。通过兼容不同浏览器的全屏API，提供了启动全屏和退出全屏的功能代码示例。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器全屏设置</title>

</head>
<body>
<button onclick="fullScreen(document.documentElement);">启动全屏</button>
<button onclick="exitFullscreen();">退出全屏</button>

<script>

    //  全屏方法
    function fullScreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    //  退出全屏
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

</script>
</body>
</html>

说明：

全屏：fullScreen(element)

其中，全屏方法是一个传参方法，因为它既可以是针对整个网页设置，也可以是针对网页中的某个元素。

就我上面写的代码而言，针对整个网页：

fullScreen(document.documentElement);

针对某个元素：

fullScreen(document.getElementById("img01"));

退出全屏：exitFullscreen()

可以看到，这是一个无参函数，因为exitFullscreen只能由document对象调用，而不是启动全屏时传入的对象。

参考：Fullscreen API 全屏显示网页

转载于:https://www.cnblogs.com/fifteen718/p/9533962.html