jquery - 使用 jQuery Address 进行 AJAX 深度链接

Question

我有一个有很多页面的网站:

For example:

HOME: http://mywebsite.com/index.html

SOME PAGE: http://mywebsite.com/categorie/somepage.html

我决定使用 AJAX 动态加载我的页面，而无需重新加载页面。因此，我决定使用 jQuery Address 插件 ( 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) 并单击某个页面 链接，jquery 成功加载 http://mywebsite.com/categorie/somepage.html 而无需重新加载页面，并且我的浏览器上的地址栏显示:http://mywebsite.com/index.html/#/categorie/somepage.html 太棒了!

但是，问题是:如果我复制此动态生成的 URL:http://mywebsite.com/index.html/#/categorie/somepage.html进入网络浏览器地址栏，它将进入我的网站 index.html 页面，而不是“SOME PAGE”页面。此外，前进/后退按钮无法正常工作，它们仅替换了网址栏中的地址，但内容保持不变。

我想我需要编写一些 JavaScript 规则来将动态 URL 与正确的页面关联起来？

一些帮助将不胜感激。谢谢:)

Answer 1

复制粘贴网址到地址栏正常后退/下一步按钮也可以使用。

应该有#才能使其正常工作

有人知道如何使 #! 可以被 google 索引吗？

或#/是同一件事吗？

基本上这对我在 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
 });