web-dev-qa-db-fra.com

Histoire de navigateur croisée JQuery Ajax avec Window.History.Pushstate et Fallback

Je souhaite mettre en œuvre une historique de navigation à l'aide de jQuery et AJAX de manière croisée. Mon approche consiste à utiliser window.history.pushState et revenir à une URL de hachage /#!/url Dans les navigateurs qui ne soutiennent pas window.history.pushState.

Par exemple:

<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>

Sur les navigateurs qui soutiennent window.history.pushState, en cliquant sur l'un de ces liens, il convient de modifier l'adresse sans rafraîchir à http:/domain.com/home , http:/domain.com/about etc. . Lorsque le navigateur ne prend pas en charge window.history.pushState, il devrait utiliser un identifiant de fragment, c'est-à-dire: - http:/domain.com/#!/home , http:/domain.com/#/about =.

MISE À JOUR: Sur la base des commentaires Ici, j'ai mis en œuvre AJAX SEO ( git ) qui utilise Adresse JQuery pour API HTML5 Historique avec Old Browser Backback à /#!/url.

jqueryajaxbrowser-history
31
Binyamin
// 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;
}
22
Ben Lee

Quelque chose que j'utilise avec Hallback Hash URL:

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 à cela avec:

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

Si vous avez besoin d'une autre explication sur cet exemple, je serai heureux de l'entendre.

ÉDITER

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

6
Koen.

Cela a été un moment depuis mon réponse originale 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});

Extraits de la documentation:

Pour indiquer que vous souhaitez utiliser HTML5 pushState prise en charge de votre application, utilisez Backbone.history.start({pushState: true}). Si vous souhaitez utiliser pushState, mais que vous avez des navigateurs qui ne prennent pas la prise en charge d'utiliser de manière native actuelle Page d'accueil, vous pouvez ajouter {hashChange: false} Aux options.

Et maintenant à chaque fois Backbone.history.navigate Est appelé, le AppRouter _ _ exécutera un AJAX charge du chemin dans le #content DIV.

Pour gérer tous les liens avec AJAX Vous pouvez utiliser ce qui suit:

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

Prenez note du {trigger: true} Qui provoque l'appel du gestionnaire du routeur (sinon seulement des changements d'URL).

Fiddle avec code d'exemple: http://jsfiddle.net/koenpunt/pkaz7/1/

4
Koen.