javascript 更改我的网络应用程序的浏览器后退按钮行为？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9788688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change browser back button behaviour for my web app?
提问by Evanss
Im making an 'app like' web page. The actual page is wider than the browser viewport which has its overflow hidden. Clicking different links changes the CSS to animate to different sections. Here is a very simple demo: http://smartpeopletalkfast.co.uk/pos/
我正在制作一个“类似应用程序”的网页。实际页面比浏览器视口宽，浏览器视口隐藏了溢出。单击不同的链接会将 CSS 更改为不同部分的动画。这是一个非常简单的演示：http: //smartpeopletalkfast.co.uk/pos/
At this stage im working on a demo, not a production site. I want to intercept the browser back button, so if you've navigated to a section, you would be taken back to the previous section rather than leaving the web page. In a perfect world this would happen with the same animations ive used for navigating to sections.
在这个阶段，我正在开发一个演示，而不是一个生产站点。我想拦截浏览器的后退按钮，因此如果您导航到某个部分，您将被带回上一部分而不是离开网页。在一个完美的世界中，这将发生在我用于导航到部分的相同动画中。
Can this be achieved? From researching I dont think its possible to intercept and disable the default browser back button.
这能实现吗？通过研究，我认为不可能拦截和禁用默认的浏览器后退按钮。
I know their are a lot of posts about disabling the browser back button on this site and normally the response is DONT! However going to different sections in my page is like navigating to separate pages, so I think what Im trying to achieve is in keeping with user expectations.
我知道他们有很多关于在这个网站上禁用浏览器后退按钮的帖子，通常的反应是不要！然而，进入我页面的不同部分就像导航到不同的页面，所以我认为我试图实现的是符合用户期望的。
The way something similar seems to normally be achieved with AJAX based applications is using HTML5's History API. As I understand you need to add URLs with fragments to the browser's history so something like mysite.com#section2. Im not sure this will work for me however as the horizontal scrolling is not based on fragment links like vertical scrolling can be. Maybe I could use JavaScript to detect when the URL ends in a fragment like #section2 and alter the CSS so the 2nd section is in the viewport? I suppose there would be no way to animate to this though?
使用基于 AJAX 的应用程序通常可以实现类似的方法是使用 HTML5 的历史 API。据我了解，您需要将带有片段的 URL 添加到浏览器的历史记录中，例如 mysite.com#section2。我不确定这对我有用，但是因为水平滚动不像垂直滚动那样基于片段链接。也许我可以使用 JavaScript 来检测 URL 何时以 #section2 之类的片段结尾并更改 CSS 以便第二部分在视口中？我想没有办法为此设置动画吗？
采纳答案by Brian Graham
Use HTML anchor tags when clicking a navigation button (on your page). Thus, scrolling to where the anchor is located (top, left). This behaviour will make the browser's back and forward buttons navigate to the anchors.
单击导航按钮（在您的页面上）时使用 HTML 锚标记。因此，滚动到锚点所在的位置（顶部，左侧）。此行为将使浏览器的后退和前进按钮导航到锚点。
Take these for example:
以这些为例：
Code for button:
按钮代码：
<a href="#filters">Filters <</a>
<a href="#map">Map ></a>
Just change the anchor of the forward and back buttons on your page as it corresponds to where the user is navigating to. This makes the browser keep track of where the user is on your page.
只需更改页面上前进和后退按钮的锚点，因为它对应于用户导航到的位置。这使浏览器可以跟踪用户在您的页面上的位置。
Even if you don't add actual anchor links to make the hash tags work, you can still use javascript's window.location.hashproperty to navigate the user yourself.
即使您没有添加实际的锚链接来使哈希标签起作用，您仍然可以使用 javascript 的window.location.hash属性来自己导航用户。
回答by Gabe
The idea of changing the native behavior of the back button on browser is definitely a red flag signaling something is being approached wrong, and is not really possible cross-browser.
改变浏览器后退按钮的本机行为的想法绝对是一个危险信号，表明某些东西正在接近错误，并且不是真正可能的跨浏览器。
I would handle the unloadeventfor the browser to try and smoothly transition between states.
我会处理unloadevent浏览器以尝试在状态之间平滑转换。
回答by josh3736
I agree with Gabe in that trying to change the behavior of the back button is usuallya red flag; however, after reading what you're trying to do, I don't see a problem. (It might be a terminology thing – you're not really trying to change the back button's behavior, you're trying to add state to the browser history so that the back button can navigate through it.)
我同意 Gabe 的观点，试图改变后退按钮的行为通常是一个危险信号；但是，在阅读了您要执行的操作后，我认为没有问题。（这可能是一个术语问题——你并不是真的想改变后退按钮的行为，你是在尝试向浏览器历史添加状态，以便后退按钮可以浏览它。）
You'll want to use jQuery BBQ, which manages state on the URL's hash (the part after the #). Listen for the hashchangeevent and animate between your panels accordingly:
您将需要使用jQuery BBQ，它管理 URL 散列上的状态（在 之后的部分#）。监听hashchange事件并相应地在面板之间设置动画：
$(window).on('hashchange', function() {
var page = $.bbq.getState('page');
// animate to `page`
});
Now, you don't even have to attach event handlers to your next page button – just link it:
现在，您甚至不必将事件处理程序附加到下一页按钮 – 只需链接它：
<a href="#page=map">Map</a>
