onfullscreenchange DOM事件

Question

正如标题所示,我想知道当浏览器进入/离开全屏模式时触发事件的最可靠方式是什么.

注意:我不是问如何全屏显示当前页面,我只是想知道是否有一种方法可以排队某些任务,例如,用户按F11或任何其他相关的全屏输入键.

Answer 1

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 <9需要一种不同的方法来确定窗口大小,所以我会让你看一下.

Answer 2

当我偶然发现这个问题时,我正在处理这个事件,我想分享我对它的了解,即使它不会解决这个问题.该onfullscreenchange现在支持事件与前缀现代桌面浏览器和Android版Chrome,但也有一些事情要心里有:

• 当窗口全屏显示时,此事件不会触发,我知道这听起来很奇怪,但它似乎只适用于文档及其元素.因此,如果文档的元素全屏显示,则会触发事件,但是当使用键盘快捷键使浏览器全屏时,它将不会触发.

• 在Chrome和Safari中,函数可以通过定义文档方法document.onwebkitfullscreenchange = myFunc;或通过定义元素方法来订阅此事件myElem.onwebkitfullscreenchange = myFunc;,也可以使用addEventListener myElem.addEventListener("webkitfullscreenchange", myFunc);.在IE和Firefox中,只有在文档中定义方法并且使用addEventListener不会触发事件时,事件才会起作用.

这是本次活动的Codepen演示,MDN中的更多信息使用全屏模式.

更新.来自MDN网站文档:

目前并非所有浏览器都实现了API的未加前缀版本(对于供应商不可用的全屏API访问,您可以使用Fscreen).

Answer 3

另一种稍微不同的方法是使用 amedia query和回退到window.document.fullscreenElement.

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

function fullscreenEvent(fullscreen) {
    ...
}

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