前言
html浏览器全屏操作,基于jquery
iframe全屏、指定标签全屏
实现
css
/** 全屏*/
.lay-dbclick-box{
position: relative;
width: 100%;
height: 100%;
}
.lay-dbclick-screen{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
}
.lay-fullScreen{
position: fixed;
left: 0;
top: 0;
border-radius: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
z-index: 9999999999999;
}
html
关键是lay-dbclick-box和lay-dbclick-screen,其中的iframe是内容文章来源:https://www.toymoban.com/news/detail-676569.html
<div class="lay-dbclick-box">
<iframe src="" width="100%" height="100%" id="fullb" frameborder="0" allowfullscreen="" ></iframe>
<div class="lay-dbclick-screen"></div>
</div>
js文章来源地址https://www.toymoban.com/news/detail-676569.html
openFullScreen();
/**
* -------------------------------------------------------------------------------------------------------
* 通用全屏操作
*/
function openFullScreen(){
// 双击全屏/退出全屏
$(".lay-dbclick-screen").dblclick(function(){
var val = $(this).parent().attr("lay-svalue");
if(!val){
$(this).parent().addClass("lay-fullScreen");
$(this).parent().attr("lay-svalue", 1);
fullScreen();
}else{
$(this).parent().removeClass("lay-fullScreen");
$(this).parent().attr("lay-svalue", "");
exitFullscreen();
}
})
// 全屏事件监听
document.addEventListener("fullscreenchange", function(){
if (getFullscreenElement() == null) {
console.log("-----------------[退出全屏]--------------")
$(".lay-fullScreen").attr("lay-svalue", "");
$(".lay-fullScreen").removeClass("lay-fullScreen");
exitFullscreen();
}else {
console.log("-----------------[打开全屏]--------------")
}
})
}
/**
* -------------------------------------------------------------------------------------------------------
* 获取全屏状态
*/
function getFullscreenElement(){
return (
document['fullscreenElement'] ||
document['mozFullScreenElement'] ||
document['msFullScreenElement'] ||
document['webkitFullscreenElement'] || null
);
}
/**
* -------------------------------------------------------------------------------------------------------
* 全屏
*/
function fullScreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
/**
* --------------------------------------------------------------------------------------------------------
* 退出全屏
*/
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
到了这里,关于html实现iframe全屏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!