3

私は ajax 経由でコンテンツをロードする機能的なワードプレスのテーマを持っています。私が抱えている問題の 1 つは、ページが直接読み込まれると、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 のハッシュ部分のみが変更された場合です。

ご覧のとおり、URL www.example.com/about/ にはハッシュ部分がありません。したがって、この部分をスクリプトで変更することはできません。そうしないと、ページのリロードがトリガーされます。
その事実を知っていると、スクリプトは新しいハッシュ部分を追加するか、既存のものを変更することによってのみ URL を変更し、URL の「パス名」部分はそのままにします。そして、www.example.com/about/#/otherlinks のような URL を取得します。

さて、私の観点から、あなたの問題を解決するには2つの方法があります。

まず、リロードせずに URL パスネーム全体を変更できる APIがありますが、どこでも利用できるわけではありません。このソリューションを使用して、古いブラウザの従来のページ リロードに戻すのが、よりクリーンな方法です。

それ以外の場合は、ページの再読み込みを 1 回だけ強制して、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 に答える