html5 Dom全屏，取消全屏requestFullscreen()

最新推荐文章于 2024-05-22 17:35:50 发布

程序媛zcx

最新推荐文章于 2024-05-22 17:35:50 发布

阅读量1.6k

点赞数

分类专栏： HTML 前端 JavaScript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_40015157/article/details/111478519

版权

JavaScript 同时被 3 个专栏收录

72 篇文章 9 订阅

订阅专栏

前端

37 篇文章 1 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

requestFullscreen()方法用来在全屏模式下打开一个元素。

此方法需要特定的前缀才能在不同的浏览器中工作（请参考下面的浏览器兼容性）。

使用document.exitFullscreen()方法取消全屏模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div>
    <button id="fullScreen" onclick="fullscreen();">点击全屏</button>
    <button id="exitFullScreen" onclick="exitFullscreen();">退出全屏</button>
</div>
</body>
</html>
<script>
    function fullscreen() {
        var el = document.documentElement; /* 获取(<html>)元素以全屏显示页面 */
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
        //执行全屏
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
        } else if (typeof window.ActiveXObject != "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }

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

//ESC可以退出全屏
</script>

程序媛zcx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 Dom全屏，取消全屏requestFullscreen()

requestFullscreen()方法用来在全屏模式下打开一个元素。此方法需要特定的前缀才能在不同的浏览器中工作（请参考下面的浏览器兼容性）。使用document.exitFullscreen()方法取消全屏模式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head>
复制链接

扫一扫