0

私は完全にjqueryを利用したWebサイトを構築しているため、ajaxを使用してすべてのページを動的にロードして、ページ間の派手な遷移を実現し、ユーザーエクスペリエンスを最大化しています. ここに私のJavaScriptコードがあります:

$(function() {

    var path = _.compact(location.pathname.split("/"));
    if(path.length<2){
        path = 'home' 
    }else{
        path = path[path.length-1];
    }
    activepage = path;

    $('.nav a').click(function(e) {
        href = $(this).attr("href");            
        loadContent(href);      
        // HISTORY.PUSHSTATE
        window.history.pushState('', 'New URL: '+href, href);   
        e.preventDefault();                     
    });

    // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
    window.onpopstate = function(event) {
        var path = _.compact(location.pathname.split("/"));
        if(path.length<2){
            path = 'home' 
        }else{
            path = path[path.length-1];
        }           
        loadContent(path);
    };

});



function loadContent(url){  
        // USES JQUERY TO LOAD THE CONTENT
        var adresa = absurl + "ajax/get_content";       
        $.ajax({
          url: adresa,
          contentType: 'application/json',
          data: { url: url },
          success: function(data) {
            switch(url)
            {
                case "projects": $.projects({ data : data }); $.projects.init();
                break;
                case "home": $.homePage({ data : data }); $.homePage.init();
                break;
                default: console.log("nista");
            }
          }
        }); 
}

Ajax 関数は、ページを作成するために必要なすべてのデータを json 形式で返します。次に、その json データを使用してページを作成するカスタム プラグインを初期化します。

このLIVE EXAMPLEでわかるように、ブラウザーの履歴 (前後) を含め、すべてが完全に正常に機能します。しかし、ここに私の問題があります...ページが完全に読み込まれると、ページのソースを見るとメインコンテナは空のままです。また、Googleボットとしてページをフェッチしようとすると空になり、これら2つが関連していると確信しています。

この例とほとんど同じコードでわかるように、リンクをクリックするとソースが変更され、ページのコンテンツも変更されますが、ページをリロードする必要はありません。私の質問は、ここで何が欠けているのか、同じ効果を得る方法は? 私はいくつかのphpコードが欠けていますか？過去数日間、これに苦労しています。すべてを試しましたが、うまくいきませんでした。

注: 現在のところ、ホーム リンクとプロジェクト リンクのみが機能しています...

すべての返信に感謝します!

4

2 に答える 2

1

pushStateページのコンテンツを Ajax で更新するときに、URI のローカル部分を変更できます。

この方法で作成したすべての URI について、サーバーが JavaScript に依存することなく同じページを構築できるようにします。

この意志：

  • 訪問者がディープ リンクをたどってサイトにアクセスしたときのパフォーマンスを向上させる
  • JavaScript を使用せずにサイトを動作させる (検索エンジン ロボットを含む)
于 2012-11-28T15:12:00.183 に答える
0

@Quentinの回答を補完するものとして、コンテンツがajax経由でロードされているかどうかをPHPで識別する必要があります。そうでない場合は、ヘッダー、フッター、ページのコンテンツなど、要求されているページのコンテンツ全体を表示する必要があります。

于 2012-11-28T16:11:05.840 に答える