html实现iframe全屏的示例代码

前言

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是内容

div class="lay-dbclick-box" iframe src="" width="100%" height="100%" id="fullb" frameborder="0" allowfullscreen="" /iframe div class="lay-dbclick-screen" /div /div

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全屏的示例代码