0

我正在使用这个jQuery 全屏插件，我想拥有它，以便“全屏”/“退出全屏”按钮将正确切换该按钮是否用于退出全屏或用户点击 Esc 或使用浏览器的退出全屏按钮。

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

这是我到目前为止用于设置按钮和切换它们的 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">

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

谢谢！

4

1 回答 1

1

我已经更详细地查看了您的网站，您应该使用以下代码：

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

您可以使用变量进行更高级的用法：

var isFullscreen;
$(document).on("fullscreenchange", function() {
   isFullscreen = !!$(document).fullScreen();
}
于 2012-11-15T17:10:30.547 回答