实现
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是内容
<divclass="lay-dbclick-box">
<iframesrc=""width="100%"height="100%"id="fullb"frameborder="0"allowfullscreen=""></iframe>
<divclass="lay-dbclick-screen"></div>
</div>
js
openFullScreen();
/**
*-------------------------------------------------------------------------------------------------------
*通用全屏操作
*/
functionopenFullScreen(){
//双击全屏/退出全屏
$(".lay-dbclick-screen").dblclick(function(){
varval=$(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("-----------------[打开全屏]--------------")
}
})
}
/**
*-------------------------------------------------------------------------------------------------------
*获取全屏状态
*/
functiongetFullscreenElement(){
return(
document['fullscreenElement']||
document['mozFullScreenElement']||
document['msFullScreenElement']||
document['webkitFullscreenElement']||null
);
}
/**
*-------------------------------------------------------------------------------------------------------
*全屏
*/
functionfullScreen(){
varelement=document.documentElement;
if(element.requestFullscreen){
element.requestFullscreen();
}elseif(element.msRequestFullscreen){
element.msRequestFullscreen();
}elseif(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}elseif(element.webkitRequestFullscreen){
element.webkitRequestFullscreen();
}
}
/**
*--------------------------------------------------------------------------------------------------------
*退出全屏
*/
functionexitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}elseif(document.msExitFullscreen){
document.msExitFullscreen();
}elseif(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}elseif(document.webkitExitFullscreen){
document.webkitExitFullscreen();
}
}
|
运行时间载入中.....