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%");
 }
}