onfullscreenchange DOM 事件答案

【问题标题】：onfullscreenchange DOM eventonfullscreenchange DOM 事件
【发布时间】：2012-01-11 14:13:27
【问题描述】：

正如标题所示，我想知道在浏览器进入/退出全屏模式时触发事件的最可靠方法是什么。

注意：我不是在问如何全屏显示当前页面，我只是想知道如果用户按 F11 或按 F11 或任何其他相关的全屏输入键。

【问题讨论】：

标签： javascript html events dom fullscreen

【解决方案1】：

当我偶然发现这个问题时，我正在处理这个事件，我想分享我对它的了解，即使它不能解决这个问题。 onfullscreenchange 事件现在支持带有前缀 by modern desktop browsers and Chrome for Android，但有一些事情要记住：

当窗口全屏时不会触发此事件，我知道这听起来很奇怪，但它似乎仅适用于文档及其元素。因此，如果文档的某个元素全屏显示，该事件将触发，但当使用键盘快捷键使浏览器全屏显示时则不会。
在 Chrome 和 Safari 中，函数可以通过定义文档方法 document.onwebkitfullscreenchange = myFunc; 或定义元素方法 myElem.onwebkitfullscreenchange = myFunc; 来订阅此事件，您也可以使用 addEventListener myElem.addEventListener("webkitfullscreenchange", myFunc);。在 IE 和 Firefox 中，该事件只有在文档中定义了方法并且使用 addEventListener 不会触发该事件时才会起作用。

这是此活动的Codepen Demo，更多信息请参见MDN Using fullscreen mode。

更新。来自 MDN 网络文档：

目前，并非所有浏览器都实现了 API 的无前缀版本（对于供应商不可知论者访问全屏 API，您可以使用 Fscreen）。

【讨论】：

Codepen 演示帮助了我。很遗憾，需要做这么多工作才能参加这个微不足道的活动。
在撰写本文时，在 Safari 桌面 v13.1 上，仍然不支持 fullscreenchangeevent（在全屏元素和 document 元素上测试），也不支持 @987654330 @监听器：需要设置onwebkitfullscreenchange监听器或者监听webkitfullscreenchange事件。
就Edge而言，应该使用onwebkitfullscreenchange监听器，而对于Internet Explorer v10和v11，应该使用onmsfullscreenchange监听器。

【解决方案2】：

screen.width 和screen.height 告诉你用户的屏幕分辨率，试试这个：

var fullscreen;
function onfullscreenchange(full) {
    ...
}

// You might want to use addEventListener and its equivalents instead
window.onresize = function () {
    if (window.outerWidth === screen.width && window.outerHeight === screen.height) {
        if (!fullscreen) {
            fullscreen = true;
            onfullscreenchange(true);
        }
    } else {
        if (fullscreen) {
            fullscreen = false;
            onfullscreenchange(false);
    }
};

我知道这不是做这一切的最干净或最稳健的方式，但希望它能给你一个想法。值得注意的是，IE

【讨论】：

+1 这就是我的想法......只是将一些代码放在一起......就像你说的不是 100% 可靠但一个很好的起点......
另外，如果用户有多个显示器，这将失败......并且没有办法可靠地检测到这一点
谢谢，但是我在 Firefox 的调整大小事件中遇到了一些麻烦，这就是为什么我从不使用它，可惜它看起来很棒。我终于使用了 John Resig 的 addEvent 函数，并在用户按下键盘上的键时查找 keyCode。
@Oddant 如果用户使用鼠标触发全屏会发生什么？
@ManseUK 是的，这是真的，但我认为超过 90% 的人会触发该键（我在页面上显示一条消息，引导他们按 F11）

【解决方案3】：

使用media query 和回退到window.document.fullscreenElement 的另一种方法。

这适用于 Chrome，无论是点击/触摸事件还是按下 F11 键。

function fullscreenEvent(fullscreen) {
    ...
}

window.onresize = function () {
    if (window.matchMedia('(display-mode: fullscreen)').matches ||
    window.document.fullscreenElement) {
       fullscreenEvent(true);
    } else {
       fullscreenEvent(false);
    }
}

【讨论】：

非常适合我。

【解决方案4】：

有一个plugin available for jQuery（我知道你没有使用 jQuery）......它的作用是监听窗口上按下的键 - 所以它监听 F11 被按下等......不是最好的解决方案但一种可能有效的方法

我认为你被难住了......

一个想法...

我只是偶然发现了这个页面 -> http://www.javascriptkit.com/howto/newtech3.shtml

JavaScript 可以使用 screen.width / screen.height 来检测屏幕的大小......也许使用 resize 事件来查看浏览器是否匹配屏幕大小，即全屏？

@Nathans 的回答是正是我在说什么......

【讨论】：

谢谢先生，你说得对，我没有使用 jQuery :) 我更喜欢 addEvent 函数，它在现代浏览器中既轻巧又一致，事实上，窗口上的 'keyup' IE 中的元素似乎无法识别，知道吗？
@Oddant 'keyup' = 释放键时

【解决方案5】：

有一个用于 Javascript 的 proposed Fullscreen API，它允许您连接到 onfullscreenchange 事件。

但是，我目前对浏览器的支持不是很乐观。

【讨论】：

谢谢，不过我已经看到了，但还没有。

【解决方案6】：

如何使用这个jQuery plugin

是的，我知道可能有纯js的方式，但这很简单。

【讨论】：