html浏览器全屏操作，基于jquery
iframe全屏、指定标签全屏
实现
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** 全屏*/ .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是内容
|
1 2 3 4 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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(); } } |
