HTML中的全屏设置

最新推荐文章于 2021-08-26 10:08:31 发布

ddu1780

最新推荐文章于 2021-08-26 10:08:31 发布

阅读量640

点赞数 2

原文链接：http://www.cnblogs.com/ys15/p/10707333.html

版权

案例是通过一张图片展示，通过两个按钮来确定是否全屏显示，一个按钮来确定是否处于全屏状态，对主流浏览器都支持。

代码实例如下：

通过判断使用的浏览器进行选择选用什么浏览器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img src="../image/1.jpg"/>
    <input type="button" id="full" value="全屏">
    <input type="button" id="cancelFull" value="退出全屏">
    <input type="button" id="isFull" value="是否全屏">

</div>
<script>
    window.onload = function () {
        var div = document.querySelector("div");
        document.querySelector("#full").onclick = function () {
            //使用Chrome浏览器需要加上webkit
            // div.webkitRequestFullScreen();
            // div.requestFullscreen();
            //使用FireFox浏览器需要加上moz
            // div.mozRequestFullScreen();

            //    所有浏览器都可以全屏，使用能力测试
            if (div.requestFullscreen) {
                div.requestFullscreen();
            } else if (div.webkitRequestFullScreen) {
                div.webkitRequestFullScreen();
            } else if (div.mozRequestFullScreen) {
                div.mozRequestFullScreen();
            } else if (div.msRequestFullScreen) {
                div.msRequestFullScreen();
            }
        }
        //    退出全屏,只能使用document实现
        document.querySelector("#cancelFull").onclick = function () {
            if (document.cancelFullscreen) {
                document.cancelFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msCancelFullScreen) {
                document.msCancelFullScreen();
            }
        }
        //是否是全屏状态 也是使用document
        document.querySelector("#isFull").onclick = function () {
            if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                alert(true);
            } else {
                alert(false);
            }
        }

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

转载于:https://www.cnblogs.com/ys15/p/10707333.html

ddu1780

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML中的全屏设置

案例是通过一张图片展示，通过两个按钮来确定是否全屏显示，一个按钮来确定是否处于全屏状态，对主流浏览器都支持。代码实例如下：通过判断使用的浏览器进行选择选用什么浏览器：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
复制链接

扫一扫