html js全屏切换按钮转到全屏但不退出

hsvhsicv 于 2023-03-06 发布在其他

关注(0)|答案(2)|浏览(289)

我把这个函数绑定到一个按钮的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中存在此行为。
有人知道我哪里错了吗？

Html

来源：https://stackoverflow.com/questions/43072598/js-fullscreen-toggle-button-goes-to-fullscreen-but-wont-exit-it

2条答案

按热度按时间

disho6za1#

请求全屏的功能，比如webkitRequestFullScreen，在document.documentElement上，但是退出全屏的功能，比如webkitExitFullscreen，就在document上，下面的代码片段应该可以在所有浏览器上正常工作，甚至IE。
请注意，在某些情况下，您将无法进入和退出全屏模式，例如，如果浏览器在平板电脑上运行，如果用户自己已经进入了全屏模式，或者如果iframe的 allowfullscreen 不为真。

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';
  }
}

∮ ∮ ∮ ∮

赞(0）回复(0）举报 2023-03-06

anauzrmj2#

试试这个

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

和...

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

祝你好运！

赞(0）回复(0）举报 2023-03-06

我来回答

html js全屏切换按钮转到全屏但不退出

2条答案

相关问题

热门标签

最新问答