Question

我的页面上有一个 Fullscreen 按钮。我想用它来制作一个全屏目标元素。在输入和退出全屏时，我想要特定的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是一个布尔值。

您可以这样称呼它：

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

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

1 个答案: