Javascript 检测浏览器是否处于全屏模式_Javascript_Dom_Browser_Fullscreen

Javascript 检测浏览器是否处于全屏模式

javascript dom browser

Javascript 检测浏览器是否处于全屏模式,javascript,dom,browser,fullscreen,Javascript,Dom,Browser,Fullscreen,是否有可靠的方法检测浏览器是否以全屏模式运行？我很确定没有任何浏览器API可以查询，但是有没有人通过检查和比较DOM公开的某些高度/宽度测量值来解决这个问题？即使它只适用于某些浏览器，我也有兴趣听到它。如何确定视口宽度和分辨率宽度之间的距离以及高度。如果是少量像素（特别是高度），则可能是全屏显示然而，这永远不会可靠 Opera将全屏视为不同的CSS媒体类型。他们叫它，你可以自己控制它： @media projection { /* these rules only apply in ful

是否有可靠的方法检测浏览器是否以全屏模式运行？我很确定没有任何浏览器API可以查询，但是有没有人通过检查和比较DOM公开的某些高度/宽度测量值来解决这个问题？即使它只适用于某些浏览器，我也有兴趣听到它。

如何确定视口宽度和分辨率宽度之间的距离以及高度。如果是少量像素（特别是高度），则可能是全屏显示

然而，这永远不会可靠

Opera将全屏视为不同的CSS媒体类型。他们叫它，你可以自己控制它：

@media projection {
  /* these rules only apply in full screen mode */
}

结合，我个人觉得它非常方便。

这适用于所有新浏览器：

if (!window.screenTop && !window.screenY) { 
   alert('Browser is in fullscreen');
}

Chrome15、Firefox10和Safari5.1现在提供了编程触发全屏模式的API。以这种方式触发的全屏模式提供了检测全屏更改的事件和用于设置全屏元素样式的CSS伪类

有关详细信息，请参阅。

Firefox 3+在

窗口上提供了一个非标准属性，用于报告浏览器是否处于全屏模式：。
对于iOS上的Safari，可以使用：
if (window.navigator.standalone) {
  alert("Full Screen");
}

更多：
铬合金至少：
onkeydown可用于检测按下F11键进入全屏。
onkeyup
可用于检测按下F11键退出全屏
结合检查keyCode==122

棘手的部分是告诉keydown/keyup如果另一个刚刚执行了代码，就不要执行它的代码。
有一个我的非跨浏览器变体：
<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
  if (!fullscreen) {
    setTimeout(function(heightStamp) {
      if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
        fullscreen = true;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
      }
    }, 500, $(window).height());
  } else {
    setTimeout(function(heightStamp) {
      if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
        fullscreen = false;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
      }
    }, 500, $(window).height());
  }
});
</script>
</body>
</html>


全屏
var fullscreen=$（window.height（）+1>=screen.height；
$（窗口）.on（'resize'，function（））{
如果（！全屏）{
设置超时（函数（heightStamp）{
如果（！fullscreen&&$（window.height（）==heightStamp&&heightStamp+1>=screen.height）{
全屏=真；
$（'body'）.prepend（“+$（窗口）.height（）+”|“+screen.height+”|全屏打开”）；
}
}，500，$（窗口）。高度（）；
}否则{
设置超时（函数（heightStamp）{
if（全屏和$（window.height（）==heightStamp和heightStamp+1

测试日期：

Kubuntu 13.10：

Firefox 27（
是必需的，脚本可以在双监视器上正常工作）、Chrome 33、Rekonq-pass
赢得7场比赛：

Firefox 27、Chrome 33、Opera 12、Opera 20、IE 10-pass

IE<10-失败
正确。这件事已经很晚了
截至2014年11月25日（编写时间），元素可以请求全屏访问，并随后控制进入/退出全屏模式
MDN解释如下：
大卫·沃尔什（David Walsh）的直截了当的解释：
我只是觉得我应该加上我的画眉，以免任何人撞到他们的头。如果您能够完全控制流程，那么第一个答案是非常好的，也就是说，您可以用代码启动全屏流程。如果有人按F11来做这件事，那就没用了
W3C的这一建议带来了一线希望，它将通过媒体查询（当然意味着window.matchMedia和相关的）实现对窗口化、浮动（无铬）、最大化、最小化和全屏的检测
我看到有迹象表明，它正在使用-webkit和-moz前缀进行实现，但它似乎还没有投入生产
所以，没有，没有解决办法，但我希望我能在撞到同一堵墙之前，避免有人跑来跑去
PS*：-moz全屏也可以玩doo dah，但很高兴知道。
我的解决方案是：
var fullscreenCount = 0;
var changeHandler = function() {                                           

    fullscreenCount ++;

    if(fullscreenCount % 2 === 0)
    {
        console.log('fullscreen exit');
    }
    else
    {
        console.log('fullscreened');
    }

}                                                                         
document.addEventListener("fullscreenchange", changeHandler, false);      
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);

用户window.innerHeight
和screen.availHeight
。还有宽度
window.onresize = function(event) {
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
        console.log("This is your MOMENT of fullscreen: " + Date());    
}

您可以检查document.fullscreenElement
是否为空，以确定是否启用了全屏模式。您需要相应地输入供应商前缀fullscreenElement
。我会用这样的方式：
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;

我在下面引用了一个很好的例子：
document.addEventListener("fullscreenChange", function () {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });

这就是我想到的解决方案。。。
我将其作为es6模块编写，但代码应该非常简单
/**
 * Created by sam on 9/9/16.
 */
import $ from "jquery"

function isFullScreenWebkit(){
    return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
    return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
    return $("*:-ms-fullscreen").length > 0;
}

function isFullScreen(){
    // Fastist way
    var result =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;

    if(result) return true;

    // A fallback
    try{
        return isFullScreenMicrosoft();
    }catch(ex){}
    try{
        return isFullScreenMozilla();
    }catch(ex){}
    try{
        return isFullScreenWebkit();
    }catch(ex){}

    console.log("This browser is not supported, sorry!");
    return false;
}

window.isFullScreen = isFullScreen;

export default isFullScreen;

文档只读属性返回当前在此文档中以全屏模式显示的元素，如果当前未使用全屏模式，则返回null
if(document.fullscreenElement){
  console.log("Fullscreen");
}else{
  console.log("Not Fullscreen");
};

支持所有主要浏览器 在搜索高和低时，我只找到了一半的解决方案。
因此，最好在这里发布一个解决这个问题的现代、有效的方法：
var isAtMaxWidth = (screen.availWidth - window.innerWidth) === 0;
var isAtMaxHeight = (screen.availHeight - window.outerHeight <= 1);
if (!isAtMaxWidth || !isAtMaxHeight) {
       alert("Browser NOT maximized!");
}

资源：





要检测浏览器是否处于全屏模式：
document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement

根据您的建议，大多数浏览器都可以使用。
2021，可以使用。这是一种生活标准，所有浏览器都支持它（除了常见的可疑浏览器——IE11和iOS Safari）
为什么需要检测这个？可能还有其他解决方案？当浏览器处于全屏模式时，无法查看操作系统报告的时间（例如，在Windows任务栏通知区域的时钟中）。能够看到当前时间对于web应用程序的用户来说非常重要，因此我们希望能够在浏览器全屏显示时显示时钟。当我们的应用程序以1024*768这样的较低分辨率运行时，Screen real estate非常昂贵，因此如果可能，我们只希望在浏览器全屏显示时钟。如果他们的桌面上通常没有时钟，也不使用浏览器全屏，该怎么办？你确定你是他们知道当前时间的责任人吗？我们的愿望是
document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement

// toggle fullscreen

      if (!document.fullscreenElement) {
        // enter fullscreen
        if (docElm.requestFullscreen) {
          console.log('entering fullscreen')
          docElm.requestFullscreen()
        }
      } else {
        // exit fullscreen
        if (document.exitFullscreen) {
          console.log('exiting fullscreen')
          document.exitFullscreen()
        }
      }