3

我有一个功能性的 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');

});
4

1 回答 1

2

你所表达的问题并不容易解决。有多个因素处于危险之中，但归结为：

  • 对 URL 的任何更改都会触发页面重新加载
  • 唯一的例外是如果只有 URL 的哈希部分发生变化

如您所知，网址 www.example.com/about/ 中没有散列部分。因此，这部分不能由您的脚本更改，否则它将触发页面重新加载。
知道这一事实后，您的脚本只会通过添加新的散列部分或修改现有的散列部分来更改 URL，而只保留 URL 的“路径名”部分。所以你会得到像 www.example.com/about/#/otherlinks 这样的 URL。

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

首先，有一个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/，您将需要更改正则表达式。

请让我知道进展如何。

于 2012-11-02T08:49:35.007 回答