浏览器全屏
2018-07-08 本文已影响0人
酷酷的小k
先说一下，所谓全屏指的是用户手动触发点击事件使浏览器进入全屏或退出全屏，也可以按esc退出全屏，而按F11虽然也是全屏，但并非意义上的全屏，顶多算是模拟全屏的一种方式，以下代码只有浏览器支持全屏才执行。
html代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Fullscreen</title>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Cache" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
.exit-fullscreen {
display: none;
}
.d1 {
width: 400px;
height: 200px;
background-color: #ffbb8b;
}
</style>
<script type="text/javascript" src="../js/plugins/fullscreen/fullscreen.js"></script>
</head>
<body>
<a href="./fullscreen.html" target="_self">刷新当前标签页</a>
<br/><br/>
<a href="./fullscreen.html" target="_blank">打开新标签页</a>
<br/><br/>
<button type="button" id="fullscreen">全屏</button>
<button type="button" id="div-fullscreen">div全屏</button>
<button type="button" id="exit-fullscreen" class="exit-fullscreen">退出全屏</button>
<br/><br/>
<div class="d1" id="d1"></div>
<script type="text/javascript">
if (isSupportFullscreen()) {
fullscreenListen(function (isFullscreen) {
if (isFullscreen) {
document.getElementById('fullscreen').style.display = 'none';
document.getElementById('div-fullscreen').style.display = 'none';
document.getElementById('exit-fullscreen').style.display = 'inline-block';
} else {
document.getElementById('fullscreen').style.display = 'inline-block';
document.getElementById('div-fullscreen').style.display = 'inline-block';
document.getElementById('exit-fullscreen').style.display = 'none';
}
});
document.getElementById('fullscreen').addEventListener('click', function () {
reqFullscreen();
});
document.getElementById('div-fullscreen').addEventListener('click', function () {
reqFullscreen(document.getElementById('d1'));
});
document.getElementById('exit-fullscreen').addEventListener('click', function () {
exitFullscreen();
});
} else {
console.log('您的浏览器不支持全屏');
}
</script>
</body>
</html>
JavaScript代码：
var reqFullscreen = null;
var exitFullscreen = null;
var fullscreenListen = null;
var isSupportFullscreen = null;
(function () {
var _isFullscreen = false;
var _isExecuteListen = false;
var _isSupportFullscreen = false;
var _rfsGlobal = document.documentElement['requestFullscreen'] ||
document.documentElement['mozRequestFullScreen'] ||
document.documentElement['webkitRequestFullScreen'] ||
document.documentElement['msRequestFullscreen'];
if (_rfsGlobal) {
_isSupportFullscreen = true;
}
isSupportFullscreen = function () {
return _isSupportFullscreen;
};
reqFullscreen = function (_ele) {
if (!_isSupportFullscreen || _isFullscreen) {
return;
}
_ele = _ele ? _ele : document.documentElement;
var _rfs = _ele['requestFullscreen'] ||
_ele['mozRequestFullScreen'] ||
_ele['webkitRequestFullScreen'] ||
_ele['msRequestFullscreen'];
_rfs.call(_ele);
};
exitFullscreen = function () {
if (!_isSupportFullscreen || !_isFullscreen) {
return;
}
var _efc = document['exitFullscreen'] ||
document['mozCancelFullScreen'] ||
document['webkitCancelFullScreen'] ||
document['msExitFullscreen'];
_efc.call(document);
};
fullscreenListen = function (_executeFunc) {
if (!_isSupportFullscreen || _isExecuteListen) {
return;
}
var _listener = null;
var _fullscreen = null;
_isExecuteListen = true;
if (document.documentElement['requestFullscreen']) {
_listener = 'fullscreenchange';
_fullscreen = 'fullscreen';
} else if (document.documentElement['mozRequestFullScreen']) {
_listener = 'mozfullscreenchange';
_fullscreen = 'mozFullScreen';
} else if (document.documentElement['webkitRequestFullScreen']) {
_listener = 'webkitfullscreenchange';
_fullscreen = 'webkitIsFullScreen';
} else if (document.documentElement['msRequestFullscreen']) {
_listener = 'MSFullscreenChange';
_fullscreen = 'msFullscreenElement';
}
document.addEventListener(_listener, function () {
_isFullscreen = document[_fullscreen];
if (typeof _executeFunc === 'function') {
_executeFunc(_isFullscreen);
}
});
};
})();
这里写了4个方法供开发人员调用，分别是：
isSupportFullscreen();
fullscreenListen();
fullscreenListen(function (isFullscreen) {});
reqFullscreen();
reqFullscreen(document.getElementById('d1'));
exitFullscreen();
其中 isSupportFullscreen 方法写不写无所谓，如果没有写并且浏览器不支持全屏的话，代码是不会执行的。
fullscreenListen 方法可以加一个 function 参数供开发人员使用，主要是判断浏览器全屏状态，不写这个参数也可以。
reqFullscreen 方法可以加一个 dom 对象参数，使某一个元素全屏，不写这个参数也可以。
exitFullscreen 方法就单纯的退出全屏，不需要参数。
注意点：代码必须写 fullscreenListen 方法，让代码处于监听全屏状态，写多个，只会在第一次的时候生效，因为不知道开发人员要不要监听全屏状态去处理其他事情，所以这个务必调用。
最后 IE 11 才支持全屏噢！
