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

Question

我将此函数与按钮的 onclick 事件绑定(bind)在一起。它应该检查 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 中存在此行为。

有人能看出我哪里出了问题吗？

Answer 1

请求全屏的函数，如webkitRequestFullScreen，在document.documentElement上，而退出全屏的函数，如webkitExitFullscreen code> 就在 document 上。下面的代码片段应该可以在所有浏览器上正常工作，甚至是 IE。

请注意，在某些情况下您将无法进入和退出全屏。一些示例是，如果浏览器在平板电脑上运行，如果用户已经自己进入全屏，或者 allowfullscreen 对于 iframe 不为 true。

function canToggleFullscreen() {
  return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}
/** return true if fullScreenElement exists, indicating the document is in full screen mode. */
function isFullscreen() {
  return !!(document.fullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
}

/** If the browser is capable, requests to be in full screen mode. */
function enterFullscreen() {
  var page = document.documentElement
  const fullScreenFn = page.requestFullscreen || page.webkitRequestFullscreen || page.msRequestFullscreen;
  if (fullScreenFn) {
    fullScreenFn.apply(page);
  }
}

/** If the browser is capable, exits full screen mode */
function exitFullscreen() {
  const exitFullScreenFn = document.exitFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
  if (exitFullScreenFn) {
    exitFullScreenFn.apply(document);
  }
}

/** Toggles between full screen modes.  The changing of inner text */
function toggleFS() {
  if (!canToggleFullscreen()) {
    document.getElementById("toggle-fs").innerText = 'Full Screen Unavailable';
  }
  if (!isFullscreen()) {
    enterFullscreen();
    document.getElementById("toggle-fs").innerText = 'Cancel Full Screen';
  } else {
    exitFullscreen();
    document.getElementById("toggle-fs").innerText = 'Enter Full Screen';
  }
}

JsFiddle