如何在进入或退出全屏时触发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事件？

回答

相关问题