如何在進入或退出全屏時觸發jQuery事件？

我在我的頁面上有一個全屏按鈕。我想用它來製作一個全屏的目標元素。我希望進入和退出全屏時特定的jQuery事件（fullscreenOn/fullscreenOff）。如果瀏覽器不支持全屏，我還希望全屏按鈕被刪除。如何在進入或退出全屏時觸發jQuery事件？

我唯一的代碼是從MDN article：

var elem = document.getElementById("myvideo"); 
if (elem.requestFullscreen) { 
    elem.requestFullscreen(); 
} else if (elem.msRequestFullscreen) { 
    elem.msRequestFullscreen(); 
} else if (elem.mozRequestFullScreen) { 
    elem.mozRequestFullScreen(); 
} else if (elem.webkitRequestFullscreen) { 
    elem.webkitRequestFullscreen(); 
}

但這並不提供/專用關事件。我怎樣才能做到這一點？

來源

2014-11-04 Mooseman

你可以使用一個jQuery插件了點。可以有用。 http://plugins.jquery.com/fullscreen/ – klauskpm 2014-11-04 12:22:15

@klauskpm該插件位於較舊的一側，並使用'.bind'等方法顯示其年齡。 – Mooseman 2014-11-04 12:24:04

我寫了一個jQuery函數：

$.fn.fullscreen = function(target){ 
    var elem = $(target)[0]; $d = $(document); 
    if(elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen){ 
     function FSon(){ $d.trigger('fullscreen').trigger('fullscreenOn').data('fullscreen',true); } 
     function FSoff(){ $d.trigger('fullscreen').trigger('fullscreenOff').data('fullscreen',false); } 
     $d.data('fullscreen',false) 
      .on('fullscreenchange',function(){ 
      if(document.fullscreen) FSon(); 
      else FSoff(); 
     }).on('mozfullscreenchange',function(){ 
      if(document.mozFullScreen) FSon(); 
      else FSoff(); 
     }).on('webkitfullscreenchange',function(){ 
      if(document.webkitIsFullScreen) FSon(); 
      else FSoff(); 
     }).on('MSFullscreenChange',function(){ 
      if(document.msFullscreenElement) FSon(); 
      else FSoff(); 
     }); 
     this.click(function(){ 
      if(elem.requestFullscreen){ 
       elem.requestFullscreen(); 
      }else if(elem.mozRequestFullScreen){ 
       elem.mozRequestFullScreen(); 
      }else if(elem.webkitRequestFullscreen){ 
       elem.webkitRequestFullscreen(); 
      }else if(elem.msRequestFullscreen){ 
       elem.msRequestFullscreen(); 
      } 
     }); 
    }else{ 
     this.remove(); 
    } 
};

它提供了以下功能：

跨瀏覽器（除非瀏覽器不支持requestFullscreen或其前綴的方法）
問題$(document)上的事件：fullscreen開/關和fullscreenOn/fullscreenOff。
將jQuery .data添加到$(document)：fullscreen是一個布爾值。

你可以把它像這樣：

$("#myButton").fullscreen("#elementToMakeFullscreen");

這裏是壓縮功能：

function n(){$d.trigger("fullscreen").trigger("fullscreenOn").data("fullscreen",true)}function r(){$d.trigger("fullscreen").trigger("fullscreenOff").data("fullscreen",false)}$d.data("fullscreen",false).on("fullscreenchange",function(){if(document.fullscreen)n();else r()}).on("mozfullscreenchange",function(){if(document.mozFullScreen)n();else r()}).on("webkitfullscreenchange",function(){if(document.webkitIsFullScreen)n();else r()}).on("MSFullscreenChange",function(){if(document.msFullscreenElement)n();else r()});this.click(function(){if(t.requestFullscreen){t.requestFullscreen()}else if(t.mozRequestFullScreen){t.mozRequestFullScreen()}else if(t.webkitRequestFullscreen){t.webkitRequestFullscreen()}else if(t.msRequestFullscreen){t.msRequestFullscreen()}})}else{this.remove()}}

來源

2014-11-04 12:19:06 Mooseman

如何在進入或退出全屏時觸發jQuery事件？

回答

相關問題