web-dev-qa-db-fra.com

Comment puis-je réellement utiliser history.js sur mon site

J'ai lu tous les articles sur history.js sur stackoverflow, y compris, this , this et this et regardé le source code mais en tant que nouveau venu sur javascript/jquery, j'ai du mal à trouver comment implémenter réellement pour avoir un support d'historique html 5 et un repli pour prendre en charge les navigateurs html4 tels que ie8/9. Comme je peux apprécier les avantages UX de présenter autant que possible des URL cohérentes, comment cela résout les liens profonds et permet le bookmarking que je veux implémenter, mais je me perds un peu en essayant de l'utiliser réellement sur mon site.

Après avoir ajouté le script history.js à ma page

Le code à modifier comme je l'ai compris est:

    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
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

Est le //Change our states où va tout le nouveau code car ce code ne donne que des exemples de commandes d'historique?

Ou devrais-je écrire mon propre code à la place de tout ce bloc de code (j'utilise jquery pour m'aider à ce stade, étant donné ma nouveauté dans le codage).

Je lisais ceci article sur le chargement de contenu dynamique et essayant de l'implémenter sur mon site (je peux faire fonctionner ce code mais je sais qu'il ne fonctionnera pas bien dans ie8/9), mais difficulté à comprendre comment combiner avec history.js

De plus, secondairement, j'essaie de comprendre comment history.js joue avec modernizr?

Est-ce un remplacement de modernizr.history (où il fait les tests et s'il n'y a pas de support pour .js revient au chargement de page typique) ou fonctionnerait-il comme ceci:

if (Modernizr.history) {
   //Code goes here that works if it's HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases?
} else {
   //code from above goes here? with function(window, undefined){...etc...  ?
}
jqueryajaxbrowser-historyhistory.js
24
pappley

L'ajout d'une prise en charge de l'historique à votre site ne vous sera d'aucune utilité, sauf si vous disposez de fonctions qui en font usage.

En ce qui concerne la modernisation, il vous indique simplement si l'historique est pris en charge sur le navigateur actuel et si vous effectuez l'action x sinon l'action y

Ok donc c'est comme ça que l'histoire fonctionnerait:

Considérer history.js un peu comme un macro enregistreur. Un client clique sur quelque chose et vous envoyez des variables que vous associez à une URL composée ou réelle:

Le client clique sur une recherche par exemple, vous appelez:

function search(params) {
  // record your current UI position
  // data (to save), title (to set on page), url (to set on page)
  History.pushState({ params: params }, "Search", "?search");


   // now run whatever should happen because client triggered search()
}

Et maintenant, lorsque le client clique sur le bouton de retour, vous pouvez obtenir l'état précédemment enregistré pour en faire quelque chose. Puisque le client frappe son bouton arrière, cela déclenchera statechange. Et puisque vous êtes abonné à cet événement, vous pouvez déterminer quel état vous avez précédemment enregistré et appeler des fonctions pour modifier l'interface utilisateur en conséquence.

// Bind to StateChange Event
History.Adapter.bind(window, 'statechange', function() {
  var State = History.getState();

  // returns { data: { params: params }, title: "Search": url: "?search" }
  console.log(State); 

  // or you could recall search() because that's where this state was saved
  if (State.url == "?search") {
    search(data.params);
  }
});

Cela résume à peu près tout. Le client déclenche une fonction, vous affectez un state/url, et lorsque le client clique en arrière, vous regardez votre état précédent et exécutez des fonctions selon que vous souhaitez restaurer l'interface utilisateur ou autre.

Tout cela peut rapidement devenir un code compliqué et délicat et je ne vois pas quoi expliquer d'autre, donc à moins que vous n'ayez obtenu l'AHA! et maintenant je sais quoi faire, je voudrais juste oublier ce genre de choses pour l'instant.

Il n'y a absolument rien de automatique ici, sauf pour saving/restoring états, tout le reste de votre application devra être codé à la main pour prendre en compte ce qui se passe si un état change.

Les liens profonds n'ont également rien à voir avec ces choses. Votre application doit avoir la capacité de s'initialiser et d'afficher des éléments d'interface utilisateur spécifiques uniquement en fonction de son appel direct via une URL. L'historique est uniquement destiné à la gestion des états lorsque les utilisateurs utilisent déjà votre application, vous pouvez donc contrôler ce qui se passe lorsqu'ils frappent le back/forward bouton.

Et tout ce qui se passe via JS, ne vous procurera aucun avantage en ce qui concerne les moteurs de recherche car ils ne se soucient pas de js et indexeront simplement le texte brut de votre page. Donc, si vous voulez un lien profond compatible avec les moteurs de recherche, vous avez besoin d'un code côté serveur qui vous rend l'interface utilisateur dans un état spécifique en fonction de l'URL demandée.

30
Robert Hoffmann