Javascript 检测屏幕是否处于全屏状态_Javascript_Html

Javascript 检测屏幕是否处于全屏状态

javascript html

Javascript 检测屏幕是否处于全屏状态,javascript,html,Javascript,Html,我做了一个按钮，允许屏幕进入全屏，反之亦然。但是，用户也可以使用电脑/笔记本电脑按钮F11进入全屏 <html> <head> <title> Zoom </title> </head> <body> <script type="text/javascript"> //fullscreen(); function fullscreen() { var change = document.getElemen

我做了一个按钮，允许屏幕进入全屏，反之亦然。但是，用户也可以使用电脑/笔记本电脑按钮F11进入全屏

<html>
<head>
<title>
Zoom
</title>
</head>
<body>
<script type="text/javascript">
//fullscreen();
function fullscreen() {
    var change = document.getElementById("fullscreen");
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||
        (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        change.innerHTML = "click to go Normal Screen";
    } 
    else 
    {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        change.innerHTML = "click to go Full Screen";
    }
}

</script>
<button id="fullscreen" onclick="fullscreen()">Click to go Full Screen</button>
<h1>hi can u see me</h1>
<h2>hahahahah</h2>
<h3>blablablabla</h3>
<h4>heheheheh</h4>
</body>
</html>


快速移动
//全屏（）；
函数全屏（）{
var change=document.getElementById（“全屏”）；
if（（document.fullScreenElement&&document.fullScreenElement！==null）||
（！document.mozFullScreen&&！document.webkitIsFullScreen））{
if（document.documentElement.requestFullScreen）{
document.documentElement.requestFullScreen（）；
}else if（document.documentElement.mozRequestFullScreen）{
document.documentElement.mozRequestFullScreen（）；
}else if（document.documentElement.webkitRequestFullScreen）{
document.documentElement.webkitRequestFullScreen（元素.允许键盘输入）；
}
change.innerHTML=“单击进入正常屏幕”；
} 
其他的
{
如果（文档取消全屏）{
document.cancelFullScreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitcancelfillscreen）{
document.webkitcancelfulscreen（）；
}
change.innerHTML=“单击以全屏显示”；
}
}
点击进入全屏
嗨，你能看见我吗
哈哈哈
布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
嘿嘿嘿嘿

根据我的代码，默认情况下，屏幕不是全屏模式。如果用户单击按钮，它将进入全屏模式，并且按钮标签也将更改为查看普通屏幕。但是如果用户单击F11，它将进入全屏模式，我希望该按钮更改为查看正常模式。请帮帮我。谢谢你

在Firefox3中，window.fullScreen可以工作（）

使用

window.innerHeight

的技巧在95%的情况下有效

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

对于5%的情况，页面上的浮动元素存在问题，导致

窗口。innerHeight

计算出错。

使用

窗口的技巧。innerHeight

在95%的情况下有效

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

对于5%的情况，页面上的浮动元素出现问题，导致

窗口。innerHeight

计算出错。

可能重复，尽管这个问题已经存在几年了：根据全屏Web API，当用户按F11时，页面未处于全屏模式，根据操作系统，浏览器可能处于全屏模式，但不是页面本身。因此，两种模式都不相同，即使用户按下F11，您仍然可以请求FS API的模式。可能重复，尽管这个问题已经存在几年了：根据全屏Web API，当用户按下F11时，页面不处于全屏模式，根据操作系统，浏览器可能处于全屏模式，但页面本身并非如此。因此，两种模式都不相同，即使用户按下F11，您仍然可以请求FS API的模式。我猜您的意思是

outerHeight

，因为

innerHeight

不适用于F11全屏模式。我猜您的意思是

outerHeight

，因为

innerHeight

不适用于F11全屏模式。