AJAX加载的URL障碍问题

Question

我有一个功能性的WordPress主题，该主题通过AJAX加载内容。我遇到的一个问题是，直接加载页面时，Ajax脚本将不再起作用。例如，链接结构如下所示，在www.example.com上单击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-to-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等URL。

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

首先，有一个API可以在没有重新加载的情况下修改整个URL pathame，但无处不在。使用此解决方案并落入古典页面重新加载以进行较旧的浏览器。

其他，您可以将页面重新加载仅一次重置为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/工作，您将需要更改正则更改。

请让我知道它的发展。