Historique ajax jquery inter-navigateur avec window.history.pushState et fallback

Je souhaite implémenter un historique de navigation à l’aide de jQuery et AJAX dans plusieurs navigateurs. Mon approche consiste à utiliser window.history.pushState et à revenir à une window.history.pushState de hachage url /#!/url dans les navigateurs qui ne prennent pas en charge window.history.pushState .

Par exemple:

 home about contact

Sur les navigateurs qui prennent en charge window.history.pushState , cliquer sur l’un de ces liens devrait changer d’adresse sans actualiser la page en http://domain.comhttps://stackoverflow.com/home , http://domain.comhttps://stackoverflow.com/about etc. Lorsque le navigateur ne prend pas en charge window.history.pushState , il devrait utiliser un identifiant de fragment, par exemple: http://domain.com/#!https://stackoverflow.com/home , http://domain.com/#!https://stackoverflow.com/about .

Mise à jour: Sur la base des commentaires, j’ai implémenté Ajax SEO ( git ) qui utilise l’ adresse jQuery pour l’API de l’historique HTML5 avec l’ancien repli du navigateur sur /#!/url .

 // Assuming the path is retreived and stored in a variable 'path' if (typeof(window.history.pushState) == 'function') { window.history.pushState(null, path, path); } else { window.location.hash = '#!' + path; }

Quelque chose que j’utilise avec les URL de hachage de secours:

 History = History || {}; History.pathname = null; History.previousHash = null; History.hashCheckInterval = -1; History.stack = []; History.initialize = function () { if (History.supportsHistoryPushState()) { History.pathname = document.location.pathname; $(window).bind("popstate", History.onHistoryChanged); } else { History.hashCheckInterval = setInterval(History.onCheckHash, 200); } }; History.supportsHistoryPushState = function () { return ("pushState" in window.history) && window.history.pushState !== null; }; History.onCheckHash = function () { if (document.location.hash !== History.previousHash) { History.navigateToPath(document.location.hash.slice(1)); History.previousHash = document.location.hash; } }; History.pushState = function (url) { if (History.supportsHistoryPushState()) { window.history.pushState("", "", url); } else { History.previousHash = url; document.location.hash = url; } History.stack.push(url); }; History.onHistoryChanged = function (event) { if (History.supportsHistoryPushState()) { if(History.pathname != document.location.pathname){ History.pathname = null; History.navigateToPath(document.location.pathname); } } }; History.navigateToPath = function(pathname) { History.pushState(pathname); // DO SOME HANDLING OF YOUR PATH HERE };

Vous pouvez lier vos événements de clic à ceci avec:

 $(function(){ $("a").click(function(){ var href = $(this).attr('href'); History.navigateToPath( href ) return false; }); });

~~Si vous avez besoin d’explications supplémentaires sur cet exemple, je serai heureux de l’entendre.~~

MODIFIER

S’il vous plaît voir mon autre réponse.

Il y a longtemps que ma réponse initiale a été donnée et je suggérerais maintenant d’utiliser Backbone .

Une implémentation pourrait être:

 // First setup a router which will be the responder for URL changes: var AppRouter = Backbone.Router.extend({ routes: { "*path": "load_content" }, load_content: function(path){ $('#content').load('/' + path); } }); var appRouter = new AppRouter; // Then initialize Backbone's history Backbone.history.start({pushState: true});

Extrait de la documentation:

Pour indiquer que vous souhaitez utiliser le support HTML5 pushState dans votre application, utilisez Backbone.history.start({pushState: true}) . Si vous souhaitez utiliser pushState , mais que les navigateurs qui ne le prennent pas en charge utilisent de manière native les actualisations de page complètes, vous pouvez append {hashChange: false} aux options.

Et maintenant, chaque fois que Backbone.history.navigate est appelé, AppRouter effectuera une charge AJAX du chemin dans la div #content .

Pour gérer tous les liens avec AJAX, vous pouvez utiliser les éléments suivants:

 $("a").on('click', function(event){ event.preventDefault(); Backbone.history.navigate( event.currentTarget.pathname, {sortinggger: true} ) });

Prenez note du {sortinggger: true} qui appelle le gestionnaire dans le routeur (sinon uniquement à partir des changements d’URL).

Historique ajax jquery inter-navigateur avec window.history.pushState et fallback

Violon avec exemple de code: http://jsfiddle.net/koenpunt/pkAz7/1/