Проблемы с хэш-обменом URL с загрузкой ajax

Question

У меня есть функциональная тема WordPress, которая загружает контент через AJAX. Однако у меня возникает одна проблема: когда страницы загружаются напрямую, сценарий ajax больше не работает. Например, структура ссылок работает следующим образом, в то время как на веб-сайте www.example.com и при щелчке ссылки на странице about ссылка становится www.example.com/#/about. Но когда я непосредственно загружаю отдельную страницу www.example.com/about, другие ссылки, нажимаемые на этой странице, превращаются в www.example.com/about/#/otherlinks. Я немного изменил код из этого учебника http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html. Вот мой код Спасибо за помощь.

jQuery(document).ready(function($) {
var $mainContent = $("#container"),
    siteUrl = "http://" + top.location.host.toString(),
    url = ''; 

$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/]))", "click", function() {
    location.hash = this.pathname;
    return false;
}); 

$(window).bind('hashchange', function(){
    url = window.location.hash.substring(1); 

    if (!url) {
        return;
    } 

url = url + " #ajaxContent"; 

    $mainContent.fadeOut(function() {
        $mainContent.load(url,function(){
            $mainContent.fadeIn();
        });        
      });
    });

  $(window).trigger('hashchange');

});

Answer 1

Проблема, которую вы выражаете, не легко решается. На карту поставлено несколько факторов, но все сводится к следующему:

• Любые изменения в URL приведут к перезагрузке страницы
• Единственное исключение, если изменяется только хэш-часть URL

Как вы можете заметить, в URL нет хеш-части www.example.com/about/. Следовательно, эта часть не может быть изменена вашим скриптом, иначе она вызовет перезагрузку страницы.
Зная об этом факте, ваш сценарий будет изменять URL-адрес только путем добавления новой части хеш-функции или изменения существующей, оставляя при этом часть URL-адреса "pathname". И так вы получите URL-адреса, такие как www.example.com/about/#/otherlinks.

Теперь, с моей точки зрения, есть два способа решения вашей проблемы.

Во-первых, есть API, который может изменить весь URL-адрес без перезагрузки, но он доступен не везде. Использование этого решения и возврат к классической перезагрузке страницы для старого браузера - более чистый метод.

Иначе, вы можете принудительно перезагрузить страницу, чтобы сбросить URL-адрес до www.example.com/ и начать с хорошей основы. Вот код для этого:

$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/]))", "click", function() {
    location = location.assign('#' + this.pathname);
    return false;
}); 

Следует отметить, что этот скрипт не будет работать, если ваш сайт не находится в корне пути. Таким образом, чтобы он работал для www.example.com/mysite/, вам понадобятся изменения в регулярном выражении.

Пожалуйста, дайте мне знать, как все прошло.