在谷歌,IE等浏览器中,点击F11按键会进入网页全屏模式,如同看电影的剧场模式,这个在代码中可以通过JS来实现,简单说下在实现这个需求后的个人总结:
底层网页是已经加载完毕的,这时我们需要的全屏其实就是对底层网页的放大处理,所以采用这种方式来做成全屏效果,你的前提是有底层的网页dom,然后对这个dom进行全屏处理。
代码:
<body><button id='btn'>进入全屏</button> <!-- 对这个div 进行全屏处理 一开始对全屏处理的dom进行隐藏(display: none;),不隐藏也是可以的,看个人需求--><div id="content" style="background:#333;width:100%;height:100%;display: none;"> <div id="quite" class="btn"><span style="color:#FFF">退出全屏</span></div> </div>
</body>
<script type="text/javascript">var content = document.getElementById('content'); $("#btn").click(function(){ //全屏处理前,将隐藏dom秀出来$("#content").show();fullScreen(content); });var quite = document.getElementById('quite'); $("#quite").click(function(){ exitFullScreen();//隐藏dom$("#content").hide();}); //进入全屏function fullScreen(el) { var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen, wscript; if(typeof rfs != "undefined" && rfs) { rfs.call(el); return; } if(typeof window.ActiveXObject != "undefined") { wscript = new ActiveXObject("WScript.Shell"); if(wscript) { wscript.SendKeys("{F11}"); } } } //退出全屏function exitFullScreen() { var el= document, cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen, wscript; if (typeof cfs != "undefined" && cfs) { cfs.call(el); return; } if (typeof window.ActiveXObject != "undefined") { wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } } </script>
文章不足之处,望提出,谢谢..