var indexPage = location.href; var routerRxp = /\.html$|\/[^.]*$|/; $(document).click(function(e){ var href = e.target.getAttribute('href'); if(href && routerRxp.test(href)){ var id = e.target.getAttribute('data-target'); history.pushState({targetId: id}, 'History demo', href); $(id).addClass('active').siblings('.page').removeClass('active'); e.preventDefault(); } }); $(window).on('popstate',function(e){ if(location.href === indexPage){ location.reload(); } var id = e.originalEvent.state.targetId; $(id).addClass('active').siblings('.page').removeClass('active'); });
最后，关于两种方法有一些比较重要的特性总结一下：
有的文章提到“Firfox，Chrome在页面首次打开时都不会触发popstate事件，但是safari会触发该事件”，经实测现在的 safari 不存在这个问题。
Mozilla指出，在 popstate 事件中，e.originalEvent.state 属性是存在硬盘里的，触发该事件后读取的历史栈信息是通过 pushState 或 replaceState 写入的才会有值，否则改属性为 null。
history.state 和 e.originalEvent.state 异曲同工，而且前者可以在该事件之外任何地方随时使用。
由于 pushSate, onpopstate 属于 H5 的部分，存在一定兼容问题，可以使用 History.js (Github) 的 polyfill 解决这个问题。