切换全屏按钮，而不管全屏如何退出？

Question

我正在使用this jQuery全屏插件，我希望它能让“全屏”/“退出全屏”按钮正确切换，无论该按钮是用于退出全屏，还是用户按Esc键或使用浏览器的退出全屏按钮。

目前，如果该按钮是独占使用，则该按钮将正确切换。这可以看到here (按钮在右上角)。但是，如果进入全屏模式，然后使用按钮以外的任何方法退出，则当前不会切换回enter fullscreen按钮。

下面是我到目前为止用来设置和切换按钮的jQuery：

$('#expand').toggle(
    $(document).fullScreen() != null
);

$('#expand').click(function() {
    $(document).toggleFullScreen();
    $(this).toggle();
    $('#contract').toggle();
});

$('#contract').click(function() {
    $(document).toggleFullScreen();
    $(this).toggle();
    $('#expand').toggle();
});

下面是它们的标记：

<img src="images/expand.png" id="expand" class="screen_control fadein button" alt="Fullscreen">
<img src="images/contract.png" id="contract" class="screen_control fadein button" alt="Exit Fullscreen">

如何检测全屏状态，以便无论用户如何退出全屏模式，都能显示正确的按钮？

谢谢!

Answer 1

我已经看过你的网站的更多细节，你应该使用以下代码：

$(document).on("fullscreenchange", function() {
   $('#expand,#contract').toggle();
}

您可以将变量用于更高级的用法：

var isFullscreen;
$(document).on("fullscreenchange", function() {
   isFullscreen = !!$(document).fullScreen();
}