/**全屏*/.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是内容

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();}}

到此这篇关于html实现iframe全屏的示例代码的文章就介绍到这了,更多相关html实现iframe全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！