當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS控制网页全屏
在谷歌，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>文章不足之處，望提出，謝謝..
轉載于:https://www.cnblogs.com/wangqilong/p/9417502.html
總結
- 上一篇： 公积金联名卡是什么？有什么用？
- 下一篇： JavaScript快速入门-ECMAS