<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS全屏</title>
<style>
html:-moz-full-screen {background: red}
html:-webkit-full-screen {background: red}
html:fullscreen {background: red}
</style>
</head>
<body>
<a href="#" onClick="fullscreen()">fullscreen</a> | <a href="#" onClick="exitFullscreen()">exitFullscreen</a>
<p id="state">no</p>
<script>
// 全屏
function fullscreen() {
? var docElm = document.documentElement;
? if (docElm.requestFullscreen) {
? ? docElm.requestFullscreen();
? } else if (docElm.mozRequestFullScreen) {
? ? docElm.mozRequestFullScreen();
? } else if (docElm.webkitRequestFullScreen) {
? ? docElm.webkitRequestFullScreen();
? } else if (docElm.msRequestFullscreen) {
? ? docElm.msRequestFullscreen();
? }
}
// 退出全屏
function exitFullscreen() {
? if (document.exitFullscreen) {
? ? document.exitFullscreen();
? } else if (document.mozCancelFullScreen) {
? ? document.mozCancelFullScreen();
? } else if (document.webkitCancelFullScreen) {
? ? document.webkitCancelFullScreen();
? } else if (document.msExitFullscreen) {
? ? document.msExitFullscreen();
? }
}
// 監(jiān)聽是否全屏
window.onload = function() {
? var elem = document.getElementById('state');
? document.addEventListener('fullscreenchange',
? ? function() {
? ? ? elem.innerText = document.fullscreen ? 'yes': 'no';
? ? },
? false);
? document.addEventListener('mozfullscreenchange',
? ? function() {
? ? ? elem.innerText = document.mozFullScreen ? 'yes': 'no';
? ? },
? false);
? document.addEventListener('webkitfullscreenchange',
? ? function() {
? ? ? elem.innerText = document.webkitIsFullScreen ? 'yes': 'no';
? ? },
? false);
? document.addEventListener('msfullscreenchange',
? ? function() {
? ? ? elem.innerText = document.msFullscreenElement ? 'yes': 'no';
? ? },
? false);
}
</script>
</body>
</html>
