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

【问题标题】：How can I trigger jQuery events when entering or exiting fullscreen?进入或退出全屏时如何触发 jQuery 事件？
【发布时间】：2014-11-04 20:19:06
【问题描述】：

我的页面上有一个 全屏 按钮。我想用它来制作目标元素全屏。当进入和退出全屏时，我想要特定的 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();
}

但这不提供特定于开/关的事件。我该怎么做？

【问题讨论】：

您可以为此使用 jQuery 插件。可以有用。 plugins.jquery.com/fullscreen
@klauskpm 这个插件比较老，用.bind等方法显示它的年龄。

标签： javascript jquery html fullscreen

【解决方案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()}}

【讨论】：