AJAX глубокая связь с адресом jQuery - PullRequest
Новая
       24

AJAX глубокая связь с адресом jQuery

1 голос
/ 27 апреля 2010

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

Например:

ГЛАВНАЯ: http://mywebsite.com/index.html

НЕКОТОРАЯ СТРАНИЦА: 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) и нажму на ссылку 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 в адресную строку веб-браузера, он перейдет на мою страницу index.html , а не на страницу "НЕКОТОРЫЕ СТРАНИЦЫ". Кроме того, кнопки «Вперед» и «Назад» работают неправильно, они заменяют только адрес в строке URL, но содержимое остается прежним.

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

Была бы признательна за помощь. Спасибо:)

Ответы [ 3 ]

2 голосов
/ 31 июля 2012

копировать вставить URL в адресную строку работает Кнопка «назад / вперед» также работает.

# должен быть там, чтобы это работало

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

1 голос
/ 02 августа 2012

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

1 голос
/ 27 апреля 2010

Примерно так: 

$(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
    }
});
...