ajax加载URL hashchange问​​题

Question

我有一个功能WordPress主题，通过ajax加载内容。我遇到的一个问题是，当页面直接加载时，ajax脚本不再起作用。例如，链接结构的工作原理如下，在www.example.com上点击关于页面链接，链接将变成www.example.com/#/about。但是，当我直接加载独立页面www.example.com/about时，从此页面单击的其他链接变为www.example.com/about/#/otherlinks。我从这个tutuorial 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的“路径名”部分。因此，您可以获取www.example.com/about/#/otherlinks等网址。

现在，从我的角度来看，有两种方法可以解决您的问题。

首先，有一个API that can modify the whole URL pathame without reload，但it's not available everywhere。使用此解决方案并回到旧版浏览器的经典页面重新加载是cleaner method。

否则，您可以强制重新加载页面一次，将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/，您需要更改正则表达式。

请让我知道它是如何去的。