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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251886.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251886.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251886.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！