更改我的Web应用程序的浏览器后退按钮行为？ [英] Change browser back button behaviour for my web app?
问题描述
我正在制作一个'应用'网页。实际页面比隐藏溢出的浏览器视口更宽。点击不同的链接会将CSS变为动画到不同的部分。这是一个非常简单的演示：
http://smartpeopletalkfast.co.uk/pos/
在这个阶段，我正在进行演示，而不是制作网站。我想拦截浏览器的后退按钮，所以如果你已经浏览到一个部分，你会被带回到前一节，而不是离开网页。在一个完美的世界里，这会发生在用于导航到相同部分的动画中。
这可以实现吗？从研究我不认为它可以拦截和禁用默认浏览器后退按钮。
我知道他们有很多关于禁用此网站上的浏览器后退按钮的帖子，通常情况下，响应是不正确的！然而，在我的页面的不同部分就像导航到单独的页面，所以我认为我试图实现的是与用户的期望保持一致。
使用基于AJAX的应用程序通常可以实现类似的方式是使用HTML5的历史记录API。据我所知，你需要添加带有片段的URL到浏览器的历史记录中，就像mysite.com＃section2一样。我不知道这会适用于我，但因为水平滚动不是基于像垂直滚动这样的片段链接。也许我可以
使用JavaScript来检测URL何时以＃section2之类的片段结束并更改CSS，以便第二部分位于视口中？我想没有办法让这个动画呢？
点击导航按钮（在您的页面上）时使用HTML定位标记。因此，滚动到锚点所在的位置（顶部，左侧）。这种行为会使浏览器的后退和前进按钮导航到锚点。
以下是这些例子：
按钮代码：
< a href =＃filters>过滤& lt;< / a>
< a href =＃map> Map& gt;< / a>
只需更改页面上向前和向后按钮的锚点，因为它对应于用户所在的位置导航到。这使得浏览器可以跟踪用户在您的页面上的位置。
即使您没有添加实际的锚链接以使哈希标签正常工作，您仍然可以使用javascript的 window.location.hash 属性自己导航用户。
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/
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?
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.
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.hash property to navigate the user yourself.
这篇关于更改我的Web应用程序的浏览器后退按钮行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
