Question

我将此功能绑定到按钮的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">';
    }
}

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

在第二次单击时，它将替换按钮的图像，但不会退出全屏。（击中＆＃39; ESC＆＃39;仍然有效。）

以下任何点击都不会做任何事情。因此，转到全屏按钮会全屏停留。

此行为在Chrome 56中。

谁能看到我在这里出错的地方？

Answer 1

请求全屏的功能（例如webkitRequestFullScreen）位于document.documentElement，但全屏退出的功能（例如webkitExitFullscreen）仅在document上。以下代码段可在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

Answer 2

尝试这个

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

有...

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

祝你好运！

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

2 个答案:

JsFiddle