HTML5提供了启动和退出浏览器全屏模式，但是麻烦的是，必须要事件来触发。
某个元素全屏：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="one">开启全屏</p>
<script>
var o=document.getElementById("one");
function fullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
o.οnclick=function(){
fullScreen(o);//p元素打开全屏
}
</script>
</body>
</html>
整个网页全屏：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="one">开启全屏</p>
<p id="two">关闭全屏</p>
<script>
var o=document.getElementById("one");
var t=document.getElementById("two");
o.οnclick=function(){
launchFullscreen(document.documentElement);
}
launchFullscreen(document.documentElement);
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();
}
}
t.οnclick=function(){
exitFullscreen();//关闭全屏模式
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
</script>
</body>
</html>
另外某些浏览器还可以通过meta直接设置全屏：
//uc全屏
<meta name="full-screen" content="yes"/>
//qq全屏
<meta name="x5-fullscreen" content="true"/>
//webAPP全屏
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes" /><!--apple强制全屏 --> <meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 --> <meta name="full-screen" content="yes"><!-- UC强制全屏 --> <meta name="browsermode" content="application"><!-- UC应用模式 --> <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 --> <meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 --> <meta name="x5-page-mode" content="app"><!-- QQ应用模式 --> <meta name="HandheldFriendly" content="true"><!-- 是针对一些老的不识别viewport的浏览器，列如黑莓 --> <meta name="MobileOptimized" content="320"><!-- 微软的老式浏览器 -->
当然网上还有用css样式设置全屏的，介于我没能理解，这里就不放代码啦。
下面附上HTML5 fullscreen API接口及解释：
属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。
属性2：fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。
方法1：requestFullscreen() 请求进入全屏模式。
方法2：exitFullscreen() 退出全屏模式。
事件1：fullscreenchange 进入/退出全屏模式切换时会触发。
事件2：fullscreenerror 进入/退出全屏模式失败时会触发。
跨浏览器返回正处于全屏的元素
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('非全屏模式');
}
}
各浏览器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*/ });
参考网站：点击打开链接
参考网站：点击打开链接
3399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
