我把这个函数绑定到一个按钮的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中存在此行为。
有人知道我哪里错了吗?
2条答案
按热度按时间disho6za1#
请求全屏的功能,比如
webkitRequestFullScreen
,在document.documentElement
上,但是退出全屏的功能,比如webkitExitFullscreen
,就在document
上,下面的代码片段应该可以在所有浏览器上正常工作,甚至IE。请注意,在某些情况下,您将无法进入和退出全屏模式,例如,如果浏览器在平板电脑上运行,如果用户自己已经进入了全屏模式,或者如果
iframe
的 allowfullscreen 不为真。∮ ∮ ∮ ∮
anauzrmj2#
试试这个
和...
祝你好运!