【前端】【H5 API】实现全屏显示功能

image-20220312151938595


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌狼蓝天 伴姬一生</title>
</head>

<body>
    <div>
        <img src="./source/img/dog.jpg" height="300" alt="">
        <button id="full">全屏显示</button>
        <button id="cancelFull">取消全屏</button>
        <button id="isFull">是否全屏</button>
        <p id="tip" style="color:blue"></p>
    </div>
    <script>
        //全屏显示
        var div = document.querySelector('div');
        document.querySelector('#full').onclick = function () {
            if (div.requestFullscreen) {
                div.requestFullscreen(); // 正常浏览器 
            } else if (div.webkitRequestFullScreen) {
                div.webkitRequestFullScreen(); // webkit 
            } else if (div.mozRequestFullScreen) {
                div.mozRequestFullScreen(); //早期火狐浏览器
            } else if (div.oRequestFullScreen) {
                div.oRequestFullScreen(); //早期Opera浏览器
            } else if (div.msRequestFullscreen) {
                div.msRequestFullscreen(); //早期IE浏览器
            } else {
                alert('暂不支持在您的浏览器中全屏');
            }
        };
        //取消全屏显示
        document.querySelector('#cancelFull').onclick = function () {
            if (document.exitFullscreen) {
                document.exitFullscreen(); // 正常浏览器 
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen(); // webkit 
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen(); //早期火狐浏览器
            } else if (document.oCancelFullScreen) {
                document.oCancelFullScreen(); //早期Opera浏览器
            } else if (document.msCancelFullscreen) {
                document.msCancelFullscreen(); //早期IE浏览器
            } else {
                alert('暂不支持在您的浏览器中全屏');
            }
            //可以用document，也可以用上方设置的变量 div
        };
        //检测当前是否处于全屏状态
        document.querySelector('#isFull').onclick = function () {
            // alert(document.webkitIsFullScreen); // webkit
            // 使用上面的弹窗方式。如果是处于全屏状态，会自动退出
            document.getElementById('tip').innerHTML=document.webkitIsFullScreen;
        };
    
    </script>
</body>

</html>

各类浏览器全屏的方法

一般浏览器

使用requestFullscreen()和exitFullscreen()来实现

早期版本Chrome浏览器

基于WebKit内核的浏览器需要添加webkit前缀，使用webkitRequestFullScreen()和webkitCancelFullScreen()来实现。

早期版本IE浏览器

基于Trident内核的浏览器需要添加ms前缀，使用msRequestFullscreen()和msExitFullscreen()来实现，注意方法里的screen的s为小写形式。

早期版本火狐浏览器

基于Gecko内核的浏览器需要添加moz前缀，使用mozRequestFullScreen()和mozCancelFullScreen()来实现。

早期版本Opera浏览器

Opera浏览器需要添加o前缀，使用oRequestFullScreen()和oCancelFullScreen()来实现。

posted @ 2022-03-12 15:23  萌狼蓝天  阅读(248)  评论(1)  编辑  收藏  举报