js中，开启全屏和关闭全屏

最新推荐文章于 2025-05-16 11:11:04 发布

原创最新推荐文章于 2025-05-16 11:11:04 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fullScreen #开启全屏 #js监听ESC按钮事件 #关闭全屏 #javascript

Javascript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页元素全屏展示的方法，并详细解释了如何通过监听窗口大小变化来适配全屏状态的变化。文章提供了具体的代码实现，包括全屏及取消全屏的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//==================
//--页面底部的点击实现全屏--

//==========================

html

<span ng-show="allSCtrl.storyDetail.resobjs[allSCtrl.presentImg-1].type==1"

id="spanScreen" class="cFullScreen"></span>

javascript

$("#spanScreen").click(function () {
if (vm.allSObj.isFullScreen === false) {
// lauchFullScreen(document.documentElement);
lauchFullScreen($(".cBigBox")[0]);
vm.allSObj.isFullScreen = true;
$(".cBigBox")[0].className = 'cBigBox h';
} else {
vm.allSObj.isFullScreen = false;
cancelFullScreen();
$(".cBigBox")[0].className = 'cBigBox';
}
});
window.onresize = function(){
if(!checkFull()){//要执行的动作
$(".cBigBox")[0].className = 'cBigBox';
vm.allSObj.isFullScreen = false;
}
};

function checkFull(){
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;

//to fix : false || undefined == undefined
if(isFull === undefined) isFull = false;
return isFull;
}
//实现全屏的方法
function lauchFullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullscreen();
}
}

//取消全屏的方法
function cancelFullScreen() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}