javascript - Problema con el botón Atrás de History API y History.js

Estoy cargando la página a través de Ajax. Cuando el usuario hace clic en un enlace, la página se carga correctamente mediante AJAX, pero cuando el usuario hace clic en el botón de retroceder, la página vuelve a cargar la página inicial. Entonces, el escenario es este.

1. Cargar la página inicial (index.php)
2. El usuario hace clic en el enlace
3. La página se carga correctamente
4. Hace clic en el botón Atrás
5. La página inicial ahora se está mostrando dos veces.

Aquí está el marcado.

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

Esto es el marcado

   <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 todavía no entiendes mi pregunta o el escenario

Aquí está el escenario completo. Página inicial

Cuando el usuario hace clic en el enlace, la página seleccionada se carga correctamente

Cuando hago clic en el botón de retroceso, la página inicial ahora está duplicada

Como puedes ver, el enlace "Page1" está duplicado. ¿Es esto un problema del navegador? o ¿mi comprensión de la API de historial es algo que falta o está incompleta? ¿Cuál es la posible solución para esto?

Respuesta #1

Si construyes tu sitio para usar una plantilla similar tanto para las páginas principales como para las páginas de contenido, podrías usar la sintaxis del selector de contenedor para jquery.load:

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

Lo que en su caso resultaría en:

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

Esto tendrá el beneficio adicional de que las páginas de URL de contenido sean accesibles directamente también, sin añadir demasiados trucos.

Respuesta #2

Esto podría suceder porque cuando navegas hacia atrás se disparará el evento 'statechange', y en tu callback estás cargando el contenido de esa página con la URL dada: $ ('#content').load(State.url);, así que cuando, por ejemplo, navegas hacia atrás a la URL /, se cargará el contenido de esa página de índice y se colocará dentro de tu contenedor, por lo que tu marcado se verá realmente así:

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

Hay varias formas de resolver este problema: la más simple es simplemente detectar si el usuario navegó a la página inicial y no cargar esta página a través de ajax, sino insertar contenido predefinido. También puedes detectar en el lado del servidor si la solicitud se realizó a través de ajax y luego devolver solo el contenido necesario para actualizar tu página (que en tu caso puede ser <p>El contenido dentro de esta caja se reemplaza con contenido de páginas de soporte usando javascript y AJAX.</p>)