我正在使用此JavaScript使网站全屏显示并退出全屏显示:
function ToggleFullscreen() {
elem = document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
问题是,如果您在全屏退出页面浏览期间用户将手机从横向旋转为纵向,则地址栏不会重新出现。这似乎是一个错误,因为如果他们之前没有旋转过设备,它会完美地工作。要取回它,用户通常可以在页面上向上滚动。但是,我当前正在制作的网站上的内容要求禁用滚动功能,以便用户无法执行此操作。因此,对他们来说,该网站似乎已经混乱了,并丢失了其地址栏。
有人能想到一种方法来找回地址栏吗?我尝试使用“ scrollTop = 0”,但没有帮助。我什至尝试了“ scrollTop = 20”,然后在延迟“ scrollTop = 0”之后仍然没有效果。使它恢复正常状态的一件事是使用“ alert('message');”。可以想象,我不想每次有人退出全屏时都弹出一条消息,尽管万一他们处于这种状态。是否还有其他JavaScript函数可能会像警报一样使地址栏返回?还是我可以尝试避免此问题的任何方法?
我发现的唯一解决方案是在屏幕旋转后延迟一段时间后退出全屏模式:
screen.orientation.addEventListener('change', () => {
if (screen.orientation.type.startsWith('landscape')) {
document.documentElement.requestFullscreen();
}
else if (document.fullscreen) {
setTimeout(() => document.exitFullscreen(), 500);
}
});