<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<li id="js_full_screen"><span class="iconfont-full-screen">全屏</span></li>
<script>
// 全屏
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);
});
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);
});
</script>
</body>
</html>
js实现浏览器全屏
最新推荐文章于 2024-09-02 19:10:49 发布