当前位置：文江博客话题详情

onfullscreenchange DOM 事件

发布于 2024-12-19 14:07:52 字数 141 浏览 5 评论 0原文

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

注意：我不是问如何全屏显示当前页面，我只是想知道是否有办法对某些任务进行排队，例如，如果用户按 F11 或任何其他相关全屏输入键。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月亮是我掰弯的 2024-12-26 14:07:52

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 需要不同的方法来确定窗口大小，因此我将让您自行查找。

screen.width and screen.height tell you the user's screen resolution, so try this:

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);
    }
};

I'm aware this isn't the cleanest or most robust way of doing all this, but hopefully it gives you an idea. Notably, IE<9 needs a different approach for determining the window size, so I'll leave you to look that up.

回复收藏 0 原文

又爬满兰若 2024-12-26 14:07:52

当我偶然发现这个问题时，我正在处理这个活动，我想分享我学到的东西，即使它不能解决这个问题。现代桌面浏览器和 Chrome 现在通过前缀支持 onfullscreenchange 事件Android，但有一些事情需要记住：

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

这是此活动的 Codepen 演示，更多信息请参见 MDN 使用全屏模式。

更新。来自 MDN 网络文档：

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

回复收藏 0 原文

妄司 2024-12-26 14:07:52

另一种稍微不同的方法是使用媒体查询并回退到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);
    }
}

A slightly other approach using a media query and a fallback to the window.document.fullscreenElement.

This works on Chrome whether it's a click/touch event or the F11 key being pressed.

function fullscreenEvent(fullscreen) {
    ...
}

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

回复收藏 0 原文