Js-FullScreen全屏

发表于

零、禁止全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>

<body onkeydown="noFullScreen(event)">
    <script type="text/javascript">
    function noFullScreen(e) {
        if (e.keyCode === 122) {
            e.preventDefault()
        }
    }
    </script>
</body>

</html>
1
2
3
document.addEventListener("webkitfullscreenchange", function () {
    document.webkitCancelFullScreen()
}, false)


一、进入全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 找到支持的方法, 使用需要全屏的 element 调用  
function launchFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
    }
}

launchFullScreen(document.documentElement) // 整个页面 
launchFullScreen(document.getElementById("videoElement")) // 某个元素


二、退出全屏

1
2
3
4
5
6
7
8
9
10
// 退出 fullscreen  
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen()
    } else if (document.mozExitFullScreen) {
        document.mozExitFullScreen()
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
    }
}


三、全屏事件

1
2
3
4
document.addEventListener("fullscreenchange", function() {}, false) 
document.addEventListener("mozfullscreenchange", function() {}, false) 
document.addEventListener("webkitfullscreenchange", function() {}, false) 
document.addEventListener("msfullscreenchange", function() {}, false)


四、全屏样式

1
2
3
4
5
6
7
8
9
10
11
12
13
html:-moz-full-screen {
    background: red;
}


html:-webkit-full-screen {
    background: red;
}


html:fullscreen {
    background: red;
}