javascript - 全屏 [英] javascript - Full screen

问题描述

if (!document.fullscreenElement
    && !document.mozFullScreenElement
    && !document.webkitFullscreenElement
    && !document.msFullscreenElement) { 

    if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}
else {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

我有这个代码用于切换全屏。它有效，但它有一些小问题。

I have this code for toggling full screen. It works, but it has some little issues.

1. 当我点击全屏按钮时，刷新全屏后模式退出，但如果我按F11并刷新，则全屏不会退出。

1. When I'm clicking to the full screen button, after refresh full screen mode exits, but if I press F11 and refresh, full screen won't exit.

如果启用了全屏模式，按F11后，单击完整屏幕按钮，不起作用

If full screen mode is enabled, after pressing F11, clicking on full screen button, will not work

我如何解决这个问题？

推荐答案

我不知道你是否能解决这些问题。它们之所以发生是因为有两种不同的全屏模式：

I don't know if you'll be able to fix those issues. They happen because there are two different full screen modes:

• 一个应用于元素/文档 您使用JavaScript（您使用API​​的那个）触发。当页面重新加载或浏览到其他页面时，此全屏幕将丢失。


• 浏览器的另一个原生，由用户使用F11设置（已应用）浏览器本身，而不是页面/文档：如果您重新加载或浏览到其他站点，浏览器将继续以全屏模式运行。）

• One applied to elements/documents that you trigger using JavaScript (the one you are using with the API). This fullscreen is lost when the page reloads or when you browse to a different page.
• Another native to the browser that is set by the user with F11 (applied to the browser itself, and not to the page/document: if you reload or browse to a different site, the browser will continue in fullscreen mode).

虽然您可以使用JS控制第一个，但您无法控制另一个。从可用性/安全性的角度来看，这是有道理的：您应该能够控制页面内的行为，但不能控制其外部或用户的偏好。

While you can control the first one with JS, you cannot control the other. This makes sense from a usability/security point of view: you should be able to control the behavior within your page, but not outside of it or the user's preferences.

您遇到的问题是因为：

• 问题1：
  
  
  
  
  • 默认情况下，全屏标志未设置。当您使用API​​进入全屏模式时，您正在设置该标志，但是当您刷新页面时，标志将转到其原始值（未设置）并且全屏丢失。与重新加载页面时重置任何其他JavaScript变量的方式相同。
  
  
  • 如果您将浏览器设置为全屏模式（使用F11），它将保持这种状态，直到退出全屏，独立于您浏览的位置，甚至关闭浏览器。您正在设置浏览器的首选项。
  
  
  • Issue 1:
    • By default the fullscreen flag is unset. When you go to full screen mode with the API, you are setting that flag, but when you refresh the page, the flag goes to its original value (unset) and the full screen is lost. The same way that any other JavaScript variable would be reset when reloading a page.
    • If you set the browser on fullscreen mode (using F11), it will remain that way until you exit the fullscreen, independently of where you browse or even if you close the browser. You are setting a browser's preference.
    
    
    • 实际上，这不是问题，因为它按预期工作。问题是你要在全屏（窗口）内全屏（元素）（ fullscreenception ！：P）。所以你没有看到任何明显的变化，但确实有一个变化，因为设置了全屏标志。你可以在这个罗伯特尼曼的演示中看到差异。他添加了CSS，因此在：全屏时页面会变红。按F11并注意背景如何变为红色，现在单击全屏/取消全屏按钮以查看背景颜色的变化。
    
    
    • Actually, this is not an issue as it works as expected. The problem is that you are going fullscreen (element) within a fullscreen (window) (fullscreenception! :P). So you don't see any apparent change, but there really is a change as the fullscreen flag is set. You can see the difference in this demo by Robert Nyman. He has added CSS so the page will go red when on :fullscreen. Press F11 and notice how the background doesn't turn red, now click the "Fullscreen/Cancel fullscreen" buttons to see how the background color changes.

    这篇关于javascript - 全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！