javascript - API d’historique et problème du bouton retour avec History.js

Je charge la page via Ajax. Lorsque l'utilisateur clique sur un lien, la page se charge avec succès via AJAX, mais lorsque l'utilisateur clique sur le bouton retour, la page recharge la page initiale. Donc le scénario est le suivant.

1. Charger la page initiale (index.php)
2. L'utilisateur clique sur le lien
3. La page se charge avec succès
4. Clique sur le bouton Retour
5. La page initiale est maintenant affichée deux fois.

Voici le devis.

    $(function() {
            // 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();
                $('#content').load(State.url);
            });

            $('a').click(function(evt) {
                evt.preventDefault();
                History.pushState(null, $(this).text(), $(this).attr('href'));
                alert(State.url)
            });
        });

Ceci est le balisage

   <div id="wrap">
            <a href="page1.html">Page 1</a>
        </div>

        <div id="content">
            <p>Content within this box is replaced with content from
                supporting pages using javascript and AJAX.</p>
        </div>

SI vous ne comprenez toujours pas ma question ou le scénario

Voici le scénario complet. Page initiale

Lorsque l'utilisateur clique sur le lien, la page sélectionnée se charge avec succès

Lorsque je clique sur le bouton de retour, la page initiale est maintenant doublée

Comme vous pouvez le voir, le lien « Page1 » est doublé. Est-ce un problème de navigateur? Ou est-ce que ma compréhension de l'API History est insuffisante ou qu'il me manque quelque chose? Quelle est la solution possible à ce problème ?

Réponse #1

Si vous construisez votre site pour utiliser un modèle similaire à la fois pour les pages principales et pour les pages de contenu, vous pourriez utiliser la syntaxe du sélecteur de conteneur pour jquery.load :

// See: http://api.jquery.com/load/
$('#result').load('ajax/test.html #container');

Ce qui dans votre cas se traduirait par :

$('#content').load(State.url + ' #content');

Cela aura l'avantage supplémentaire que les pages URL du contenu sont également accessibles directement sans ajouter trop d'astuces.

Réponse #2

Cela pourrait se produire parce que lorsque vous naviguez en arrière, cela déclenchera l'événement 'statechange', et dans votre callback vous chargez le contenu de cette page avec l'URL donnée : $ ('#content').load(State.url);, donc lorsque, par exemple, vous naviguez en arrière vers l'URL /, cela chargera le contenu de cette page index et le placera à l'intérieur de votre conteneur, donc votre balisage ressemblera en fait à ceci :

<div id="wrap">
        <a href="page1.html">Page 1</a>
</div>

<div id="content">
    <div id="wrap">
        <a href="page1.html">Page 1</a>
    </div>

    <div id="content">
        <p>Content within this box is replaced with content from
            supporting pages using javascript and AJAX.</p>
    </div>
</div>

Il existe plusieurs façons de résoudre ce problème - la plus simple est simplement de détecter si l'utilisateur a navigué vers la page initiale et de ne pas charger cette page via AJAX, mais d'insérer du contenu prédéfini. Vous pouvez également détecter côté serveur si la requête a été faite via AJAX et ensuite ne retourner que le contenu nécessaire pour mettre à jour votre page (ce qui, dans votre cas, peut être <p>Le contenu de cette boîte est remplacé par le contenu des pages de support en utilisant JavaScript et AJAX.</p>).