当浏览器后退按钮没有达到预期效果时该怎么办
我有一个页面,当用户单击链接时,通过隐藏和显示预加载的 div 来处理导航。但是,用户认为他们实际上已经更改了页面,因此他们单击浏览器的“后退”按钮试图返回到之前隐藏的 div。但当然,他们会回到原来的页面。
处理这个问题的最佳方法是什么? 90% 的流量来自登录页面。我应该在两者之间夹一个重定向页面吗?这是怎么做到的?我可以更改浏览器的后退按钮行为吗?
I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
如果您已经在使用 jQuery,为什么不简单地添加一个历史管理器 像 jq-bbq 或 hashchange 或历史管理器? (或者,如果您想真正全力以赴,请切换到 MVC JavaScript 框架,例如 Sammy.) 这样,后退按钮将按照用户期望的方式工作,而不是通过阻止后退按钮或抛出重定向来破坏他们的期望。 (当然,除非你有充分的理由:-))
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
如果您使用像 jQuery UI 这样的浏览器历史记录插件,您最终会更改历史记录,以便后退按钮实际上不会卸载页面。
http://yoursite.com
->用户点击某物
->新地址栏显示 http://yoursite.com/#/something
因为用户访问时会出现哈希标记返回它会返回到 http://yoursite.com 这应该会触发你的 show previous div 函数
阅读有关可用历史记录的更多信息可用于 jQuery 的管理器插件。有不少。大多数(如果不是全部)都提供您可以指定的可用回调函数。
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
页面状态更改时,将一组唯一的参数写入 URL 的哈希值。您可以通过 JS 更改此设置,而不会导致页面重新加载。
在页面上设置一个计时器,重复检查当前位置哈希值,如果它发生变化(即用户按下“后退”按钮),则更新页面状态以匹配 URL。
我的这个方案在本地应用程序中发挥了巨大的作用。
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
jQuery 地址库是另一个不错的选择。
http://www.asual.com/jquery/address/
您可以设置 URL不同的应用程序状态,并在页面重新加载时获取 URL“参数”。
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
两个想法:
1)onbeforeunload。询问用户是否真的想回去。
2) 夹入重定向页面。登录->重定向->你的页面。单击后退即可将用户带到您的重定向页面。
对于那些知道自己在做什么的人来说,第二个问题有点令人头疼。我认为后退按钮(以及所有标准导航元素)应该尽可能少地混乱。
我会选择 onbeforeunload:
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload: