AJAX deeplinking с JQuery Адрес

Question

У меня есть сайт, который имеет много страниц:

Например:

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

НЕКОТОРЫХ СТР: http://mywebsite.com/categorie/somepage.html

я решил чтобы мои страницы загружались динамически с помощью AJAX без перезагрузки страницы. Поэтому я решил использовать JQuery Адрес плагин (http://www.asual.com/jquery/address/docs/) для того, чтобы позволить deeplinking и вперед-назад навигация:

<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 страницу, а не на странице «НЕКОТОРЫХ СТР» , Кроме того, кнопки «Вперед»/«Назад» работают неправильно, они заменяют только адрес в строке URL, но контент остается прежним.

Я полагаю, что мне нужно написать какое-то правило JavaScript, которое связывает динамический URL с правильной страницей?

Некоторая помощь будет оценена по достоинству. Спасибо :)

Answer 1

Что-то вроде этого:

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

Update:

Если вы загружаете страницы вручную (например, по ссылке клик) вместо того, чтобы использовать обработчик событий адреса (например $.address.change(function() { ... })) , а затем заменить $.address.value(path); выше с вызовом Ajax для страницы в path:

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

Answer 2

копия паста url адрес bar работает задний/следующий кнопка тоже работающий.

# должны быть там, чтобы заставить его работать

Кто-нибудь знает, как сделать #! поэтому его индексируется 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 
}); 

Answer 3

Вы можете сделать это индексироваться Google, добавив (#!): $ .address.crawlable (истина); Вот ссылка, которую я нашел полезной для jQuery Адресные методы: http://www.asual.com/jquery/address/docs/