jQuery：使用退出按钮退出全屏模式时如何执行代码？

以下问题：使用我的代码，我通过单击列表中的图像进入全屏模式。我通过 jQuery 将下一个按钮和上一个按钮移动到屏幕边缘。但离开全屏模式后，我希望它们回到原来的位置。但是如何检测全屏模式是否被取消呢？

这是我的代码： HTML：

<div id="slider-control-left"><span id="slider-prev"></span></div>
<div id="slider">
  <ul class="bxslider">
    <li><img ... /></li>
    ...
    <li><img ... /></li>
  </ul>
</div><!-- end slider-->

javascript:

$(document).ready(function () {
        $('.bxslider li img').click(function (event) {
            var clicked = $(this);
            var clicked_index = clicked.index() + 1;
            if (clicked[0].mozRequestFullScreen) { //works only for firefox so far
                clicked[0].mozRequestFullScreen();
                $('#slider-next').css({
                    "position": "fixed",
                    "right": "0",
                    "top": "50%",
                    "z-index": "2147483647"
                });
                $('#slider-next').click(function (event) {
                    clicked_index = clicked_index + 1;
                    var clacked = $('.bxslider li img').eq(clicked_index);
                    document.mozCancelFullScreen();
                    clacked[0].mozRequestFullScreen();
                });
           });

        });

正如您所看到的，通过单击下一个按钮，全屏模式将在“幻灯片”放映期间取消。但我只需要在通过退出按钮退出全屏时执行我的代码。

我已经做了一些研究，并试图找出如何检测退出全屏，我尝试在我的代码中嵌入一些代码片段，但我未能让它工作。

这段代码根本没有多大帮助：if (window.innerHeight == screen.height) {...}

检测转义按钮按键有效，但我无法嵌入我的代码中以使其工作：

$(document).keyup(function (e) {
            if (e.keyCode == 27) {
                $('#slider-next').css({
                    "position": "absolute",
                    "right": "auto",
                    "top": "194px",
                    "z-index": "auto"
                });
            }
        });

有人可以帮忙吗？

根据您使用的浏览器，您需要绑定适当的前缀。您可以检测事件 screenchange，如果它发生了变化，您需要轮询它当前是否处于全屏状态。 fullscreen 属性始终绑定到文档，因此您可以使用它来检查当前状态并使用它来相应地触发事件。以下代码片段绑定到所有主要浏览器并在所有主要浏览器中进行检测。注意：这些事件在ios中不可用

$(el).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});

进一步阅读此内容http://davidwalsh.name/fullscreen http://davidwalsh.name/fullscreen