1. 程式人生 > >js 頁面全屏,退出全屏, fullScreen

js 頁面全屏,退出全屏, fullScreen

專案有個需求,當點選開啟一個新頁面的時候需要該頁面全屏(類似F11鍵功能),查詢之後發現沒辦法直接用js來觸發全屏,只能通過使用者滑鼠、鍵盤等事件中才能觸發,即“對於一些非使用者事件,比如onload、timeout等之類的事件中呼叫requestFullScreen是無法生效的,出於安全性考慮必須在使用者事件中呼叫,比如滑鼠、鍵盤等操作”。
文件全屏的方法本身是作用在body或documentElement上的,也可以作用的元素本身上,其他元素如CANVAS、VIDEO,之類的也可以發起全屏請求。

作用在document的全屏程式碼

function fullScreen(){
var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } }

作用在document的關閉全屏程式碼

 function closeFullScreen(){
   if (document.exitFullscreen) {  
     document.exitFullscreen();  
   }else if (document.mozCancelFullScreen) {  
     document.mozCancelFullScreen();  
   }else if (document.webkitCancelFullScreen) {  
     document.webkitCancelFullScreen();  
   }else
if (document.msExitFullscreen) { document.msExitFullscreen(); } }

基於元素全屏的程式碼

<!--html code-->
    <div id="content" style="width:500px;height:500px;background:red;">
        這是被全屏的元素
        <button id='btn'>全屏</button>
        <button id="closeBtn">退出全屏</button>  
    </div> 
//js code
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}");  
        }  
  }  
} 

var btn = document.getElementById('btn');  
var content = document.getElementById('content');   //被全屏顯示的元素
btn.onclick = function(){  
    fullScreen(content);  
}  
var closeBtn = document.getElementById('closeBtn');  
closeBtn.onclick = function(){  
    exitFullScreen();  
}