js 頁面全屏,退出全屏, fullScreen
阿新 • • 發佈:2019-02-17
專案有個需求,當點選開啟一個新頁面的時候需要該頁面全屏(類似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();
}