history.js – 正确的实现

我在我的网站上加载了一个名为#container的div与JQuery / Ajax。 我有不同类型的链接：

1. 普通的锚链接
2. JQuery-Triggers在单击特定div时触发事件。

现在我想添加支持后退和前进浏览器按钮和书签function的function。 我遇到了history.js，但我遇到了一些问题，并且找不到一个非常简单的教程如何正确使用它。

我的链接：

Imprint 

我读到SEO最好使用<a href="https://stackoverflow.com/questions/9645920/history-js-the-correct-implementation/imprint/" …但是我的服务器上找不到该URL。 所以我的第一个问题是，我如何确保myurl.com/imprint正常工作并且不会产生404页？

来到history.js …目前我在index.php中包含了以下代码，紧跟在后面

  $(document).ready(function(){ (function(window,undefined){ // Prepare var History = window.History; // Note: We are using a capital H instead of a lower h if ( !History.enabled ) { // History.js is disabled for this browser. // This is because we can optionally choose to support HTML4 browsers or not. return false; } // Bind to StateChange Event History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate alert("state"); var State = History.getState(); // Note: We are using History.getState() instead of event.state }); History.Adapter.bind(window,'anchorchange',function(){ }); var currentState = History.getState(); var currentUrl = currentState.url; var urlParts = currentUrl.split('#'); $('#container').load('templates/'+ urlParts[1] +'.php'); $('#footer.credits').on('click','.link_imprint',function() { var currentUrl = $(this).attr('href'); var urlParts = currentUrl.split('#'); History.pushState(null,null,currentUrl); $('#container').load('templates/'+ urlParts[1] +'.php'); }); })(window); }); 

使用此代码，在单击链接后，URL将更改为：myurl /＃imprint和imprint.php将加载到container.php中。 但是当我现在点击后退按钮时，URL会发生变化，但内容仍然是来自印记的内容。 如何确保容器使用旧内容刷新？ 我想我忘了什么，但我不知道该怎么做。 我用statechange / anchorstate尝试了它，但当我点击后退按钮时，都不会触发这两个事件。

谢谢你的协助。

PS：我在状态更改事件中添加了警报，但它永远不会被触发。 这不可能是正确的，对吗？ 当我点击链接并且url更改为myurl.com/#imprint时，我可以看到anchorchange-event触发…

Answer 1

对于旧版浏览器，您可以使用此库： https ： //github.com/devote/HTML5-History-API它完全模拟旧浏览器中的历史记录。

 $( document ).ready(function() { function loadContent( href ) { alert( "loading content... from url: " + href ); // load dynamic content here } $( window ).bind( 'popstate', function( e ) { // the library returns the normal URL from the event object var cLocation = history.location || document.location; alert( [ cLocation.href, history.state ] ); loadContent( cLocation.pathname + cLocation.search + cLocation.hash ); }); $('#footer.credits').on('click','.link_imprint',function() { var currentUrl = $( this ).attr( 'href' ); loadContent( currentUrl ); history.pushState( null, null, currentUrl ); }); });