快捷導(dǎo)航

js模擬F11頁面全屏顯示

更新時間：2019年09月17日 15:10:38 作者：江邊的鋒

這篇文章主要為大家詳細(xì)介紹了js模擬實現(xiàn)F11使頁面全屏顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js模擬F11頁面全屏顯示的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>測試全屏</title>
</head>
<body>
 <button id='btn'>全屏按鈕</button> 
<div id="content" style="background:yellow;width:500px;height:500px;">
<div id="quite" class="btn">退出全屏</div> 
</div>
 <script type="text/javascript">

var btn = document.getElementById('btn'); 
  var content = document.getElementById('content'); 
  btn.onclick = function(){ 
   console.log(content);
fullScreen(content); 
  }
  var quite = document.getElementById('quite'); 
  quite.onclick = function(){
   exitFullScreen(); 
  }

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(el) {
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>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript事件冒泡,事件捕獲和事件委托詳解
這篇文章主要介紹了javaScript 事件冒泡,事件捕獲和事件委托的相關(guān)資料,需要的朋友可以參考下，希望能夠給你帶來幫助
2021-11-11
axios概念介紹和基本使用
axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,下面這篇文章主要給大家介紹了關(guān)于axios概念介紹和基本使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
javascript textContent與innerText的異同分析
因為發(fā)現(xiàn)網(wǎng)絡(luò)上很少有這方面的內(nèi)容，因此就把自己私有blog上的這篇文章搬出來到Boluor的公開blog，方便其它人查閱。
2010-10-10
js定時器怎么寫？就是在特定時間執(zhí)行某段程序
定時器想必大家并不陌生吧，在本文為大家詳細(xì)介紹下js中是如何實現(xiàn)定時器的，具體原理及代碼如下，感興趣的朋友不要錯過
2013-10-10
詳解JavaScript中的六種錯誤類型
本文給大家詳細(xì)介紹了JavaScript中的六種錯誤類型,需要的朋友可以參考下
2017-09-09
javascript基于DOM實現(xiàn)省市級聯(lián)下拉框的方法
這篇文章主要介紹了javascript基于DOM實現(xiàn)省市級聯(lián)下拉框的方法,可實現(xiàn)選擇省份后出現(xiàn)對應(yīng)城市下拉框選項的功能,非常具有實用價值,需要的朋友可以參考下
2015-05-05
JavaScript獲取標(biāo)簽的幾種方式小結(jié)
本文主要介紹了JavaScript獲取標(biāo)簽的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
原生javascript實現(xiàn)文件異步上傳的實例講解
下面小編就為大家?guī)硪黄鷍avascript實現(xiàn)文件異步上傳的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
結(jié)合?ES6?類編寫JavaScript?創(chuàng)建型模式
這篇文章主要介紹了結(jié)合ES6類編寫JavaScript創(chuàng)建型模式，本文開始系統(tǒng)性的對20多種JavaScript?設(shè)計模式進行簡單概述，然后結(jié)合ES6類的方式來編寫實例代碼展示其使用方式，需要的朋友可以參考一下
2022-07-07
詳解TypeScript中枚舉的使用
枚舉是 TypeScript 中一個非常有趣且實用的特性，它可以讓我們更好地組織和管理代碼，下面就來和大家聊聊TypeScript中枚舉的具體使用吧
2023-06-06