javascript 控制页面全屏显示
作者:互联网
首先是按钮样式采用的是bootstrap样式
<!--全屏-->
<a id="js_full_screen">
<i id="glyphicon" class="glyphicon glyphicon-fullscreen"></i>
<span class="iconfont-full-screen"></span>
</a>
下面是js代码
// 全屏
var $fullScreenEle = $('#js_full_screen'),
$fsChildEle = $fullScreenEle.children(),
$navbarEle = $('.zh-navbar'),
$headerEle = $('.zh-header'),
$glyphicon = $("#glyphicon");
$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');
$glyphicon.removeClass('glyphicon glyphicon-fullscreen').addClass('glyphicon glyphicon-move');
$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');
$glyphicon.removeClass('glyphicon glyphicon-move').addClass('glyphicon glyphicon-fullscreen');
$navbarEle.show();
$headerEle.css('top', 60);
}
}
window.sessionStorage.setItem('winHgt', window.innerHeight);
});
标签:glyphicon,wscript,javascript,window,docEle,全屏,var,document,页面 来源: https://blog.csdn.net/qq_19524879/article/details/120565039