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链接，jquery 会成功加载而http://mywebsite.com/categorie/somepage.html无需重新加载页面，并且我的浏览器上的地址栏会显示： http://mywebsite.com/index.html/#/categorie/somepage.html太棒了！

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

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

一些帮助将不胜感激。谢谢 ：）

4

3 回答 3

2

复制粘贴 url 到地址栏正在工作 后退/下一个按钮也工作。

#应该在那里使它工作

有谁知道怎么做#！所以它可以被谷歌索引？

或#/是一样的吗？

基本上这在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

您可以通过添加：$.address.crawlable(true); 使其可被 Google (#!) 索引。这是我发现对 jQuery 地址方法有帮助的链接： http ://www.asual.com/jquery/address/docs/

于 2012-08-02T13:09:03.830 回答
1

像这样的东西：

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

更新：

如果您是手动加载页面（例如点击链接）而不是使用地址事件处理程序（例如$.address.change(function () { ... })），则将$.address.value(path);上面的内容替换为页面的 Ajax 调用path：

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