Estoy tratando de implementar history.pushState mientras uso la función .load() para cargar contenido sin redirigir la página, la funcionalidad .load() funciona bien y history.pushState funciona en la primera implementación. Pero cuando hago clic en otro enlace, se agrega a la URL...
Esto es lo que quiero decir:
URL principal: https://materialwebdesign.ltd
Haga clic en el enlace y la URL se convierte en: https://materialwebdesign.ltd/inc/material-design
Haga clic en otro enlace y la URL se convierte en: https://materialwebdesign.ltd/inc/inc/bootstrap
¿Por qué está pasando esto? Aquí está mi código:
$(document).ready(function() { $('#main_content').load('inc/main-content.html', function() { $(this).animate({ height: '100%', width: '100%' }, 2000, 'linear'); }); $('.dynamic').click(function(e) { e.preventDefault(); var page = $(this).attr('href'); var title = page.title; $('#main_content').html('<div class="mdl-spinner mdl-js-spinner is-upgraded is-active"></div>'); if (typeof (history.pushState) != 'undefined') { var obj = {Title: title, Url: page} $('#main_content').load(page + '.html', function() { $(this).animate({ height: '100%', width: '100%' }, 2000, 'linear') }); if(page != window.location){ history.pushState(obj, obj.Title, obj.Url); } return false; // don't follow the link }; }); });Además del problema mencionado anteriormente, la animación simplemente no se anima, si pudieras ayudar con eso también, te lo agradecería mucho.
obj.Url es una URL relativa, por lo que se interpreta en relación con la URL actual de la página. Dado que contiene un subdirectorio, cada vez que haga esto, agregará otro nivel de subdirectorio a la URL de la página actual.
En lugar de $(this).attr('href') , que devuelve la URL relativa en el atributo, use this.href ; esto devolverá la propiedad href , que es una URL absoluta después de la canonicalización.