退出全螢幕效果與全螢幕效果我們可能在看影片網站時看到多,這裡來為各位介紹利用js全螢幕和退出全螢幕程式碼範例吧，,需要的朋友可以參考下
JS 全螢幕和退出全螢幕
js實作瀏覽器視窗全螢幕和退出全螢幕的功能，市面上主流瀏覽器如：Google、火狐、360等都是相容的，不過IE低版本有點瑕疵（全螢幕狀態下仍有底部的狀態列）。
這個demo基本上是夠了，直接複製下面的原始碼另存為html檔案看效果吧。
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
-->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
// 判断各种浏览器，找到正确的方法
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}//退出全螢幕判斷瀏覽器類型
function exitFull() {
// 判断各种浏览器，找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>我們知道，瀏覽器全螢幕通常按快捷鍵F11。 JS控制瀏覽器全螢幕也不稀奇，它讓網頁應用程式看起來更像似原生軟體應用程式效果。例如點餐系統、叫號系統等等。
JS讓瀏覽器全螢幕及退出全螢幕的方法網路上很多，這不是重點，重點是需注意：瀏覽器全螢幕只能透過滑鼠手勢點擊事件去觸發。
JS全螢幕方法
var $fullScreen = document.getElementById("js-fullScreen");//按钮
if ($fullScreen) {
$fullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}#JS退出全螢幕方法
var $cancelFullScreen = document.getElementById("js-cancelFullScreen");
if ($cancelFullScreen) {
$cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}#控制台警告
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
釋義：在"Element"上執行"requestFullscreen"方法失敗，javascript API僅允許透過手勢去建立！ （即沒有權限）
通常是由於程式設計師想要觸發瀏覽器自動全螢幕顯示而導致。但很抱歉，此方法行不通，必須透過手勢去創建，即使是onload、trigger()、mouseover也觸發不了！
官方解釋
該Element.requestFullscreen()方法發出非同步請求，使元素全螢幕顯示。但不能保證元素會被放入全螢幕模式。
如果允許進入全螢幕模式，文件將收到fullscreenchange事件，讓它知道它現在處於全螢幕模式。如果權限被拒絕，則文件會接收到一個fullscreenerror事件。
結論
可能出於使用者操作體驗的考量吧，客戶端javascript讓瀏覽器全螢幕只能透過滑鼠手勢點擊事件去觸發，也就是click() 。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是JS 全螢幕和退出全螢幕詳解（含代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
