进入或退出全屏模式时如何触发jQuery事件？

Question

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

我唯一的代码来自MDN文章 ：

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是一个布尔值。

您可以这样称呼它：

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