javascript - 如何在进入或退出全屏时触发 jQuery 事件？

Question

我的页面上有一个全屏按钮。我想用它来使目标元素全屏显示。我想要进入和退出全屏时的特定 jQuery 事件 (fullscreenOn/fullscreenOff)。如果浏览器不支持全屏，我还希望删除全屏按钮。

我唯一的代码来自 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();
}

但这不提供特定于开/关的事件。我怎样才能做到这一点？

Answer 1

我写了一个 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是一个 bool 值。

你可以这样调用它:

$("#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()}}