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

【问题标题】：Toggle fullscreen button regardless of how fullscreen is exited?无论如何退出全屏，都切换全屏按钮？
【发布时间】：2012-11-16 01:10:30
【问题描述】：

我正在使用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">

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

谢谢！

【问题讨论】：

尝试查看 $(window).resize() 回调函数并在此处编码您的逻辑
对不起...不太清楚你在这里建议什么。你能详细说明一下吗？

标签： jquery fullscreen

【解决方案1】：

我已经更详细地看到了你的网站，你应该使用这个代码：

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

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

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

【讨论】：