您的位置：首页 > Web前端 > JavaScript

全屏模式fullscreen

2017-11-03 16:37 190 查看

参考

http://www.cnblogs.com/minghui007/p/5601194.html

http://www.cnblogs.com/lfqcode/p/6164001.html

fullscreen API 接口

属性1：fullscreenElement，该属性返回当前处于全屏模式的DOM元素。

属性2：fullscreenEnabled，该属性返回当前 document 是否进入了可以请求全屏模式的状态。

方法1：requestFullscreen()，请求进入全屏模式。

方法2：exitFullscreen()，退出全屏模式。

事件1：fullscreenchange，进入/退出全屏模式切换时会触发。

事件2：fullscreenerror，进入/退出全屏模式失败时会触发。

由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理

跨浏览器返回正处于全屏的元素

function fullscreenElement() {

var fullscreenEle = document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement;

//注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null

console.log("全屏元素：" + fullscreenEle);

return fullscreenEle;

}

跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态

function fullscreenEnable() {

var isFullscreen = document.fullscreenEnabled ||

window.fullScreen ||

document.webkitIsFullScreen ||

document.msFullscreenEnabled;

//注意：要在用户授权全屏后才能准确获取当前的状态

if (isFullscreen) {

console.log('全屏模式');

} else {

console.log('非全屏模式');

}

}

跨浏览器发动全屏

function lanchFullscreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen();

}

else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

}

else if (element.msRequestFullscreen) {

element.msRequestFullscreen();

}

else if (element.webkitRequestFullscreen) {

element.webkitRequestFullScreen();

}

}

跨浏览器退出全屏

function exitFullscreen() {

if (document.exitFullscreen) {

document.exitFullscreen();

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

}

else if (document.msExitFullscreen) {

document.msExiFullscreen();

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

}

}

各浏览器fullscreenchange 事件处理

document.addEventListener('fullscreenchange', function(){ /*code*/ });

document.addEventListener('webkitfullscreenchange', function(){ /*code*/});

document.addEventListener('mozfullscreenchange', function(){ /*code*/});

document.addEventListener('MSFullscreenChange', function(){ /*code*/});

各浏览器fullscreenerror 事件处理

document.addEventListener('fullscreenerror', function(){ /*code*/ });

document.addEventListener('webkitfullscreenerror', function(){ /*code*/});

document.addEventListener('mozfullscreenerror', function(){ /*code*/);

document.addEventListener('MSFullscreenError', function(){ /*code*/ });

跨浏览器全屏模式下样式代码

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full-screen</title>
<script SRC="../lib/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: grey;
display: flex;
justify-content: center;
align-items: center;
}
:-webkit-full-screen .container {
background: red;
}
.btn {
width: 300px;
height: 30px;
font-size: 16px;
}

</style>
</head>
<body>
<div class="container">
<button id="btn" class="btn">click</button>
</div>
<script>
var button = document.getElementById('btn');
// 进入全屏
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();
}
}
// 退出全屏
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

button.onclick = function () {
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;// 判断是否全屏
if (!isFullScreen) {
launchFullScreen(document.documentElement); // 整个页面全屏
// launchFullScreen(document.getElementById("btn")); // 某个元素全屏
}
else {
exitFullScreen();
}
var fullScreenElement = document.fullscreenEnabled || document.mozFullscreenElement || document.webkitFullscreenElement; // 当前处于全屏状态的元素 element.
var fullScreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled; // 标记 fullScreen 当前是否可用.
console.log(fullScreenElement);
console.log(fullScreenEnabled)
};

document.addEventListener('fullscreenchange', function () {
alert(123)
});
document.addEventListener('webkitfullscreenchange', function () {
alert(123)
});
document.addEventListener('mozfullscreenchange', function () {
alert(123)
});
document.addEventListener('MSFullscreenChange', function () {
alert(123)
});

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航