event.preventDefault();导航，同时仍然允许使用后退和前进按钮答案

【问题标题】：event.preventDefault(); navigation whilst still allowing back & forward buttons to be usedevent.preventDefault();导航，同时仍然允许使用后退和前进按钮
【发布时间】：2015-08-10 22:44:15
【问题描述】：

我最近一直想知道如何实现特定类型的导航功能。即，当您在本网站的任何功能上单击“了解更多”https://pageproof.com/ 或返回主页时，它不会导致页面重新加载，而只是似乎将视口“重新定向”到另一个页面。但是，浏览器上的后退和前进按钮仍然有效。这是如何实现的？是否只是链接上的setTimeout 延迟，在横向动画之后，给人一种运动的错觉？或者它更复杂。我真的很感谢这里的任何帮助！

【问题讨论】：

查看 onhashchange 事件和这篇文章：stackoverflow.com/questions/25806608/…

标签： javascript jquery html animation navigation

【解决方案1】：

好问题。

在 PageProof，我们使用 angular.js 作为我们的框架，但是我已经在我们的网站上整合了一个完全原生的 JavaScript 版本的组件。

https://gist.github.com/jacobmarshall/bf94443c2294c555154b.

我们的应用是所谓的单页应用，我们选择使用 popstate 事件 (history api) 作为我们的 URL，而不是使用 hashchange 事件 (hashchange api)。

这样做的方式是，您必须拦截（并阻止）通常会导致浏览器刷新/重定向到另一个页面的任何事件。而是调用history.pushState，您可以在script.js 的第50 行看到它。执行此操作时，您还需要将更新的内容加载到页面上的元素中。我们实现这一点的方法是使用一个名为 ngAnimate 的模块，该模块复制视图元素，并在页面上为旧元素设置动画，并在页面上为副本设置动画。

ngAnimate 允许我们添加我们自己的动画，方法是根据每个元素是被删除还是被添加到页面来添加类。一旦动画完成，旧元素就会从页面中完全移除。

当您单击浏览器后退/前进按钮时，这一切都起作用的原因是，每当 url 更改时，window 对象上就会触发 popstate 事件。同样，当这种情况发生时，我们会将内容重新加载到页面中（就像我们拦截其他事件时一样）。

只是一个简短的说明；我为您创建的示例可能仅适用于 Chrome，如您所知。就这样，我只隔离了使这一切发生的零零碎碎的东西，没有额外的臃肿。

我们选择popstate 而不是hashchange 的原因之一是因为我们可以使用popstate 完全控制整个URL，而hashchange 只允许您更改哈希后的URL 段。所以我们得到了像 pageproof.com/dashboard 这样漂亮的 URL，而不是像 pageproof.com/#/dashboard 这样的 URL。

我注意到您没有将您的问题标记为angularjs，但如果您确实想查看它，我们使用$locationProvider.html5Mode(true) 来启用所有popstate 的东西。

【讨论】：

【解决方案2】：

window.onhashchange = function(e) {
  var what = window.location.hash.substring(1);
  //what gives you the #subnav from url http://someurl.com/#subnav
}

function callTosetHistory(){
var baseUrl = window.location.href.split('#')[0];
if(history.pushState)
    history.pushState({},'title','#subNav');
}

【讨论】：

【解决方案3】：

我和@teampageproof 在一起。我们使用AngularJS 实现了这个效果。 Angular 通过其 $routeProvider 方法处理所有导航。我们只是简单地对视图进行动画处理以提供幻灯片效果。

【讨论】：