[英]How to capture browser BACK action to keep user in page without refreshing?
I'm trying to control the default BACK action on my PWA because when user press the Mobile Phone's back button it messes up the UX.我正在尝试控制我的 PWA 上的默认 BACK 操作,因为当用户按下手机的后退按钮时,它会扰乱用户体验。
For example, when modal is show, back button should close modal and not go back to previous page.例如,当模式显示时,后退按钮应该关闭模式而不是 go 返回上一页。
After much research and testing I finally got this working with the following code:经过大量研究和测试,我终于使用以下代码实现了这一点:
$(window).on('popstate', function (e) {
let goBack = true;
if($("#modal_box").is(":visible")) {
goBack = false;
$("#modal_box").modal('hide');
}
if(goBack == true){
history.back();
}else {
// Stay on the current page.
history.pushState({}, '');
}
});
But the problem with this is when the user is scrolled down somewhere middle or bottom of the page the above code makes the view jump back to the top of the page, and it's frustrating the users.但问题在于,当用户向下滚动页面中间或底部的某处时,上面的代码会使视图跳回页面顶部,这让用户感到沮丧。
Is there a quick fix for the above code?上面的代码有快速修复吗? Or do I need to use different logic since I think the history.pushState is making the page jump up to top no matter what.或者我是否需要使用不同的逻辑,因为我认为 history.pushState 无论如何都会使页面跳到顶部。
UPDATE: Thank you all for comments.更新:谢谢大家的评论。 I figured a simple way to keep the page from scrolling (or at least visibly scrolling) like how @reynolds suggested... but instead of messing with the scroll state, for some odd reason, using我想出了一个简单的方法来防止页面滚动(或至少明显滚动),就像@reynolds 建议的那样......但出于某种奇怪的原因,而不是弄乱滚动 state,使用
history.go(1);
instead of history.pushState({}, '');而不是 history.pushState({}, '');
works!作品!
What's happening with history.go(1) is that instead of making the page reload to top of page, going "forward" seems to auto scroll to where you were previously, in a very very fast way which the user can't even notice anymore. history.go(1) 发生的事情是,不是让页面重新加载到页面顶部,而是“向前”似乎自动滚动到您之前所在的位置,以一种用户甚至无法注意到的非常非常快的方式了。 And this behavior seems to be native in desktop and mobile browsers i've tested on (Firefox, Chrome, Opera).这种行为似乎在我测试过的桌面和移动浏览器(Firefox、Chrome、Opera)中是原生的。 Beautiful!美丽的!
history.pushstate
does not prevent backwards navigation but rather pushes a state to the browser's history stack before the backwards navigation occurs. history.pushstate
不会阻止向后导航,而是在向后导航发生之前将 state 推送到浏览器的历史堆栈。 That said, if you are okay with this, then you could maintain the previous position of the page as Viney said.也就是说,如果您对此没有意见,那么您可以像Viney所说的那样维护页面的前一个 position。 However, you will need to do so after the page is loaded by loading from the state object.但是,您需要在通过从 state object 加载页面后执行此操作。
Capture the scroll position like so:像这样捕获滚动条 position:
scrollPos = 0
$(window).scroll(function() {
scrollPos = $(window).scrollTop();
});
Then, add it to the state:然后,将其添加到 state:
if(goBack == true){
history.back();
}else {
// Stay on the current page.
history.pushState({ 'scrollPos': scrollPos }, '');
}
Finally, check the state on page load and scroll to scrollPos if available:最后,检查页面加载时的 state 并滚动到 scrollPos(如果可用):
const currentState = history.state;
$(window).on('beforeunload', function() {
if (currentState && currentState.scrollPos) {
$(window).scrollTop(currentState.scrollPos);
}
});
This will, however, also cause the page to scroll to scrollPos on refresh.但是,这也会导致页面在刷新时滚动到 scrollPos。
Alternatively, if you want to actually prevent back, I recommend you read this post first.或者,如果你真的想防止倒退,我建议你先阅读这篇文章。
You can preserve the scrollTop
value which holds how much window has been scrolled through.您可以保留scrollTop
值,该值包含滚动了多少 window。
scrollPos = 0
$(window).scroll(function() {
scrollPos = $(window).scrollTop();
});
Then update that on pushstate然后在 pushstate 上更新它
if(goBack == true){
history.back();
}else {
// Stay on the current page.
history.pushState({}, '');
$(window).scrollTop(scrollPos);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.