history.js - la mise en œuvre correcte

je charge mon contenu sur mon site dans un div appelé #container avec JQuery/Ajax. J'ai à différents types de liens:

  1. normal d'ancre des liens
  2. JQuery-qui Déclenche le feu à un événement lors d'un clic sur un div.

Maintenant, je veux ajouter des fonctionnalités à l'appui de précédent et suivant du navigateur-les boutons et les signets de la fonctionnalité. Je suis tombé sur history.js mais j'ai quelques problèmes avec elle et ne peut pas trouver un vraiment facile tutoriel comment l'utiliser correctement.

Mes liens:

<a href='#imprint' class='link_imprint'>Imprint</a>

J'ai lu que c'est mieux pour le RÉFÉRENCEMENT d'utiliser <a href="imprint/" ... mais que l'URL ne soit pas trouvé sur mon serveur. Donc, mon première question est, comment je peux vous assurer que myurl.com/imprint est travail et ne résulte pas en une page 404?

Venir history.js... En ce moment j'ai inclus le code suivant dans mon index.php juste derrière la <body>

<script>
        $(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);
});

Avec ce code, après avoir cliqué sur le lien de l'URL change: myurl/#empreinte et imprint.php est chargé dans le container.php. Mais quand je l'ai maintenant, cliquez sur le bouton de l'URL change, mais le contenu est toujours celui de l'empreinte. Comment puis-je m'assurer que le conteneur se rafraîchit avec l'ancien contenu? Je crois que j'ai oublié quelque chose, mais je ne sais pas ce que je dois faire. Je l'ai essayé avec statechange/anchorstate mais aucun de ces deux événements seront déclenchés lorsque je clique sur le dos-bouton.

Merci de m'aider.

P. S: j'ai ajouté une alerte à la modification de l'état de l'événement, mais il ne sera jamais déclenché. Qui ne peut pas être correcte, non? Je peux voir le anchorchange-événement se déclenche, lorsque je clique sur le lien et l'url change à myurl.com/#imprint...

OriginalL'auteur Torben | 2012-03-10

  1. 7

    Pour les anciens navigateurs, vous pouvez utiliser cette bibliothèque: https://github.com/devote/HTML5-History-API complètement émule l'histoire dans les navigateurs plus anciens.

    $( 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 );
    });
});
    WOW, il fonctionne vraiment très bien avec IE8. Notre société a la vitesse d'un escargot quand il s'agit de la mise à niveau de logiciel. Donc, pouvez-vous me dire si cela serait-ce aussi travailler pour IE7 & IE6?
    Oui, ce travail correctement dans IE6-7
    Comment est-il possible d'écouter pour statechange avec cette bibliothèque?
    à l'aide de popstate au lieu statechange, statechange non standardisés. popstate est standart événement

    OriginalL'auteur devote