Question

我正在使用this jQuery全屏插件，我想拥有它，以便无论按钮是用于退出全屏还是用户，“全屏”/“退出全屏”按钮都会正确切换点击Esc或使用浏览器的退出全屏按钮。

目前，如果按钮是专门使用的，按钮将正确切换。可以看到here（按钮位于右上角）。但是，如果输入全屏模式，然后使用按钮以外的任何方法退出，则当前不会切换回输入全屏按钮。

这是我到目前为止设置按钮并切换它们的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();
}

无论全屏退出如何，都要切换全屏按钮？

1 个答案: