jquery全屏及退出全屏

涉及方法：

requestFullScreen：请求全屏

exitFullscreen：退出全屏

cancelFullScreen：取消全屏

fullscreenchange：监听全屏变化

html
<li id=”js_full_screen”><span class=”iconfont-full-screen”></span></li>

js
// 全屏
var $fullScreenEle = $(‘#js_full_screen’),
$fsChildEle = $fullScreenEle.children(),
$navbarEle = $(‘.zh-navbar’),
$headerEle = $(‘.zh-header’);
$fullScreenEle.click(function() {
if($fsChildEle.hasClass(‘iconfont-full-screen’)) {// 全屏
var docEle = document.documentElement;
var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
if (rfs) {
rfs.call(docEle);
} else if (typeof window.ActiveXObject !== “undefined”) {
var wscript = new ActiveXObject(“WScript.Shell”);
if (wscript != null) {
wscript.SendKeys(“{F11}”);
}
}
$fsChildEle.removeClass(‘iconfont-full-screen’).addClass(‘iconfont-exit-screen’);
$navbarEle.hide();
$headerEle.css(‘top’, 10);
} else {// 退出全屏
var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;
if (cfs) {
cfs.call(document);
} else if (typeof window.ActiveXObject !== “undefined”) {
var wscript = new ActiveXObject(“WScript.Shell”);
if (wscript != null) {
wscript.SendKeys(“{F11}”);
}
}
}
});

// 通过 resize 事件监听退出全屏
$(window).resize(function() {
var prevWinHgt = window.sessionStorage.getItem(‘winHgt’);
if(prevWinHgt) {
if(window.innerHeight<prevWinHgt && $fsChildEle.hasClass(‘iconfont-exit-screen’)) {
$fsChildEle.removeClass(‘iconfont-exit-screen’).addClass(‘iconfont-full-screen’);
$navbarEle.show();
$headerEle.css(‘top’, 60);
}
}
window.sessionStorage.setItem(‘winHgt’, window.innerHeight);
});
也可通过 fullscreenchange 来监控全屏变化
document.addEventListener(“fullscreenchange”, function(e) {
console.log(“fullscreenchange”, e);
});
document.addEventListener(“mozfullscreenchange”, function(e) {
console.log(“mozfullscreenchange “, e);
});
document.addEventListener(“webkitfullscreenchange”, function(e) {
console.log(“webkitfullscreenchange”, e);
});
document.addEventListener(“msfullscreenchange”, function(e) {
console.log(“msfullscreenchange”, e);
});