javascript - History API és History.js Vissza gomb probléma

Az oldalt Ajax-on keresztül töltöm be. Amikor a felhasználó rákattint egy linkre, az oldal sikeresen betöltődik Ajax-szal, de amikor a felhasználó a vissza gombra kattint, az oldal újratölti a kezdeti oldalt. Tehát a helyzet a következő.

1. Töltse be a kezdőoldalt (index.php)
2. A felhasználó rákattint a linkre
3. Az oldal sikeresen betöltődik
4. A Vissza gombra kattint
5. A kezdőoldal most kétszer jelenik meg.

Itt van a jelölés.

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

Ez a jelölés

   <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>

HA még mindig nem érted a kérdésemet vagy a helyzetet

Íme a teljes forgatókönyv. Kezdőlap

Amikor a felhasználó rákattint a linkre, a kiválasztott oldal sikeresen betöltődik

Amikor a vissza gombra kattintok, az eredeti oldal most megduplázódik

Amint látja, a "Page1" link duplikálódott. Ez böngészőprobléma? Vagy az, ahogyan értem a history API-t, hiányos vagy hibás? Mi lehetséges megoldás erre?

Válasz #1

Ha úgy építed fel az oldaladat, hogy a főoldalakra és a tartalmi oldalakra is hasonló sablont használj, akkor használhatod a container selector szintaxist a jquery.load-hoz:

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

Aminek az Ön esetében az eredménye a következő lenne:

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

Ennek az az előnye is meglesz, hogy a tartalom URL-oldalai közvetlenül is elérhetők lesznek, anélkül hogy túl sok trükköt kellene bevetni.

Válasz #2

Ez megtörténhet, mert amikor visszafelé navigálsz, az 'statechange' eseményt váltja ki, és a callback függvényedben betöltöd az adott URL-hez tartozó oldal tartalmát: $ ('#content').load(State.url);, tehát amikor, mondjuk, visszanavigálsz a / URL-re, betölti az index oldal tartalmát, és elhelyezi a konténeredben, így a jelölésed valójában így fog kinézni:

<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>

Ennek a problémának a megoldására többféle mód létezik - a legegyszerűbb, ha csak azt észleljük, hogy a felhasználó az kezdőoldalra navigált, és nem ajax-szal töltjük be az oldalt, hanem előre meghatározott tartalmat illesztünk be. A szerver oldalon is érzékelheted, ha a kérés ajax-szal történt, és akkor csak a szükséges tartalmat küldheted vissza az oldal frissítéséhez (ami az esetetekben lehet <p>A dobozban lévő tartalom a támogatott oldalak tartalmával javascript és AJAX segítségével cserélődik.</p>).