js全屏切换按钮进入全屏但不会退出答案

【问题标题】：js fullscreen toggle button goes to fullscreen but won't exit itjs全屏切换按钮进入全屏但不会退出
【发布时间】：2017-03-28 14:41:22
【问题描述】：

我将此函数绑定到按钮的 onclick 事件。它应该检查 documentElement 是否应该切换全屏模式并交换按钮图像。

function toggleFS() {
    var fsmode = (document.fullScreenElement && document.fullScreenElement !==     null) ||    // alternative standard method
        (document.mozFullScreen || document.webkitIsFullScreen);
    var page = document.documentElement;
    if(!fsmode) {
        if(page.requestFullscreen) {
            page.requestFullscreen();
        } else if (page.mozRequestFullScreen) {
            page.mozRequestFullScreen();
        } else if (page.webkitRequestFullScreen) {
            page.webkitRequestFullScreen();
        }
        document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
    } else {
        if (page.exitFullscreen) {
            page.exitFullscreen();
        } else if (page.msExitFullscreen) {
            page.msExitFullscreen();
        } else if (page.mozCancelFullScreen) {
            page.mozCancelFullScreen();
        } else if (page.webkitExitFullscreen) {
            page.webkitExitFullscreen();
        }
        document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
    }
}

在页面加载后第一次单击时，它可以正常工作并将页面置于全屏状态并将按钮切换到退出全屏图像。

在第二次单击时，它会替换按钮的图像，但不会退出全屏。（点击“ESC”仍然有效。）

任何后续点击都不会执行任何操作。所以它被卡在全屏状态，点击全屏按钮。

Chrome 56 中存在此行为。

谁能看出我哪里出错了？

【问题讨论】：

您需要查看developer.mozilla.org/en-US/docs/Web/API/Document/fullscreen 了解更多详情。我相信您必须使用 webkitIsFullScreen 而不是 mozFullScreen 才能在 Chrome 中达到预期的效果
该函数确实使用了 webkitIsFullScreen 以及 ms 和 moz，因为它需要在所有浏览器中工作。

标签： javascript html

【解决方案1】：

请求全屏的功能，如webkitRequestFullScreen，在document.documentElement上，而退出全屏的功能，如webkitExitFullscreen，只在document上。下面的 sn-p 在 Chrome、Edge 和 IE 上正常工作。

document.getElementById("toggle-fs").addEventListener("click", function() {
  toggleFS()
});

function isFullScreen() {
  return (document.fullScreenElement && document.fullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null) ||
    (document.mozFullScreen || document.webkitIsFullScreen);
}

function enterFS() {
  var page = document.documentElement
  if (page.requestFullscreen) page.requestFullscreen();
  else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
  else if (page.msRequestFullscreen) page.msRequestFullscreen();
  else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}

function exitFS() {
  if (document.exitFullScreen) return document.exitFullScreen();
  else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
  else if (document.msExitFullscreen) return document.msExitFullscreen();
  else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}

function toggleFS() {
  if (!isFullScreen()) {
    enterFS();
    document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
  } else {
    exitFS();
    document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
  }
}

JsFiddle

【讨论】：

太完美了，谢谢。我可以期望这也能在 Safari 中工作吗？他们不再有 Windows 版本，所以我很难测试。
参考MDN 文档，我希望它会使用 webkit 前缀。

【解决方案2】：

试试这个

<button id="toggle-fs" onclick="toggleFullScreen()"><img src="/images/nofs.png"></button>

与...

document.getElementById("toggle-fs").style.display = "block";

祝你好运！

【讨论】：