1

私は多くのページを持つウェブサイトを持っています:

例えば：

家：http://mywebsite.com/index.html

一部のページ: http://mywebsite.com/categorie/somepage.html

ページをリロードせずに、AJAX を使用してページを動的にロードすることにしました。そこで、ディープリンクとバックフォワード ナビゲーションを可能にするために、jQuery アドレスプラグイン ( http://www.asual.com/jquery/address/docs/ ) を使用することにしました。

<script type="text/javascript" src="uploads/scripts/jquery.address-1.2rc.min.js"></script>
<script type="text/javascript">
                $('a').address(function() {
                    return $(this).attr('href').replace(/^#/, '');
                });
</script>

プラグインをインストールした後、http://mywebsite.com/index.html (HOME)に移動してSOME PAGEリンクをクリックすると、jqueryhttp://mywebsite.com/categorie/somepage.htmlはページをリロードせずに を正常にロードし、ブラウザにアドレス バーが表示されます http://mywebsite.com/index.html/#/categorie/somepage.html。

ただし、問題は、この動的に生成さhttp://mywebsite.com/index.html/#/categorie/somepage.html れた URL を Web ブラウザーのアドレス バーにコピーすると、"SOME PAGE" ページではなく、私の Web サイトのindex.htmlページに取り込まれることです。また、進む/戻るボタンは正しく機能しません。URL バーのアドレスを置き換えるだけで、コンテンツは同じままです。

動的 URL を正しいページに関連付ける JavaScript ルールを作成する必要があると思いますか?

いくつかの助けをいただければ幸いです。ありがとう ：）

4

3 に答える 3

2

URL をアドレス バーにコピーして貼り付けると、戻る/次へボタンも機能します。

the # should be there to make it work

anyone know how to make #! so its indexable by google?

or #/ is the same thing?

basically this work for me on wordpress:

// ajax setup
$.ajaxSetup({cache:false, success: function() { 
// optional action here
}});  

// Event handlers
$.address.init(function(event) {
  $('#nav li a').address(function() {
  return $(this).attr('href').replace(location.pathname, '');
   });
 }).bind('externalChange', {}, function(event) {
    var post_id; // get page id
    var nav_id; // get nav class
    // for back button 
    switch (true) {
     case (event.value == undefined):
           post_id = 2; nav_id = 'home'; break;
     case (event.value == "/about"):
           post_id = 19; nav_id = 'about'; break;
     case (event.value == "/product"):
           post_id = 26; nav_id = 'product'; break;

    ...etc....

     default: post_id = 2; nav_id = 'home';
    }

    // content loader on back/next button
    $("#content-wrap").load("http://www.somesite.com/home/",{id:post_id}); // load content
 });   

 // content loader by #nav 
 $(document).on("click","#nav li a",function(e){                                         
   var post_id = $(this).attr("id"); // get page id   
   $("#content-wrap").load("http://www.somesite.com/home/",{id:post_id}); // load content  
   return false; // keep url, no refresh
 });

于 2012-07-31T08:47:30.897 に答える
1

このようなもの：

$(function () {
    var path = location.hash.substring(1); // remove '#'
    if (path) {
        $.address.value(path);
    }
});

アップデート：

アドレス イベント ハンドラー (例: ) を使用する代わりに、ページを手動で (リンク クリック時などに) ロードする場合は、上記を次のページの Ajax 呼び出しに$.address.change(function () { ... })置き換えます。$.address.value(path);path

$(function () {
    var path = location.hash.substring(1); // remove '#'
    if (path) {
        // get page at path
    }
});
于 2010-04-27T10:10:32.137 に答える
1

$.address.crawlable(true); を追加することで、Google によってインデックス可能 (#!) にすることができます。jQuery Address メソッドに役立つリンクを次に示します: http://www.asual.com/jquery/address/docs/

于 2012-08-02T13:09:03.830 に答える