CSS*_*uff 5 javascript google-chrome fullscreen
我正在使用此 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();
}
}
}
Run Code Online (Sandbox Code Playgroud)
问题是,如果用户在退出全屏时在页面浏览期间将手机从横向旋转到纵向,则地址栏不会重新出现。这似乎是一个错误,因为如果他们之前没有旋转设备,它就可以完美运行。要取回它,用户通常可以在页面上向上滚动。但是,我目前正在制作的网站上的内容要求禁用滚动,因此用户无法这样做。所以对他们来说,网站似乎已经搞砸并丢失了他们的地址栏。
有人能想出办法让地址栏回来吗?我尝试使用“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);
}
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
240 次 |
| 最近记录: |