JQuery - 全螢幕控制切換與其事件

2014-11-30 11:11 PM

有時若需要讓使用者完全沉浸於我們設計的使用者體驗內時

就會需要使用全螢幕的功能

但可能是安全性上的考量或是避免開發者濫用全螢幕功能

此功能必須由使用者以按鈕觸發才可動作

以下範例為在特定DIV加上全螢幕控制按鈕功能

並可切換指定容器顯示為全螢幕狀態

程式碼範例

// 全螢幕控制按鈕
var fullscreenDiv = $("#fullscreenDiv");
fullscreenDiv.on("click", doFullScreen);
 
// 針對各瀏覽器觸發全螢幕要求
function doFullScreen(){
 // 取得要顯示為全螢幕的容器
 var elem = $("#fullScreenTarget")[0];
 
 var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
 // 目前非全螢幕狀態 開啟全螢幕
 if( !isFullScreen ){
  if (elem.requestFullscreen) {
   elem.requestFullscreen();
  } else if (elem.msRequestFullscreen) {
   elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
   elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
   elem.webkitRequestFullscreen();
  }
 }
 // 目前為全螢幕狀態 關閉全螢幕
 else{
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
 }
}
 
// 全螢幕要求事件(包括進入及退出)
$(document).on("mozfullscreenchange webkitfullscreenchange fullscreenchange", fullscreenChange);
 
 
// 針對全螢幕狀態處理
function fullscreenChange(){
 var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
 // 目前非全螢幕狀態 設定回預設大小(由內容決定)
 if( !isFullScreen ){
  $("#fullScreenTarget").width("");
 }
 // 目前為全螢幕狀態 設定為100%大小
 else{
  $("#fullScreenTarget").width("100%");
 }
}

詳細解說

// 僅有透過使用者互動行為才可啟動全螢幕相關方法
// 若不使用此方式 呼叫全螢幕將會無效
var fullscreenDiv = $("#fullscreenDiv");
fullscreenDiv.on("click", doFullScreen);
 
// 全螢幕不一定是將整個網頁文件做全螢幕顯示
// 亦可指定特定的容器做全螢幕顯示
// 例如我只想要顯示畫面主體的內容
// 而不想要顯示選單部分
// 則只要選擇包含主體內容的容器即可
var elem = $("#fullScreenTarget")[0];
 
// 針對各瀏覽器的全螢幕屬性值做檢查
var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
// 針對各家瀏覽器呼叫特定的全螢幕方法
if (elem.requestFullscreen) {
 elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
 elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
 elem.webkitRequestFullscreen();
}
 
// 針對各家瀏覽器呼叫特定的關閉全螢幕方法
// 須注意此處是使用document做控制
// 無論一開始選擇的全螢幕容器為何皆相同
if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
}
 
// 全螢幕狀態更改時將會觸發事件(各家瀏覽器的事件亦不相同)
// 須注意此處使用的亦是document
$(document).on("mozfullscreenchange webkitfullscreenchange fullscreenchange", fullscreenChange);
 
// 在fullscreenChange()方法內會看到特地修改了容器的大小
// 是因為指定要顯示為全螢幕的容器大小比例將會維持
// 並不會因為放大為全螢幕就自動符合全螢幕的長寬比例
// 因此若要顯示為滿版畫面
// 就必須要指定寬度為100%
$("#fullScreenTarget").width("100%");

各項資料連結

JQuery 官方網站