загрузка сайта в стиле rapidshare

#jquery

Вопрос:

Как я могу заставить страницы загружаться как rapidshare без перезагрузки окна?

например:

если вы просматриваете страницы, окно браузера не перезагружается, оно просто изменяет последний параметр URL, например #!myrs_overview, #!buyrapids, #!help и т. д

когда я вижу это в firebug, он присваивает этому параметру имя, то есть сверху (home, buyrapids) http://screensnapr.com/v/wPJtCY.png

Спасибо

Ответ №1:

#! называется hashbang, и это стандарт, позволяющий Google сканировать ajax-страницы. Они просто используют AJAX для повторного заполнения информации о странице, а затем обновляют URL-адрес хэша:

Возьмем следующий пример навигационной ссылки:

 <a href="contact.php" title="Contact Us" id="contact-us">Contact</a>

Если мы не хотим, чтобы страница перенаправлялась contact.php , но мы хотим загрузить содержимое, мы могли бы сделать это вместо этого:

 <a href="#!contact" class="nav-link" rel="contact.php" title="Contact Us" id="contact-us">Contact</a>

Затем с помощью jQuery:

 $('.nav-link').click(function(){
    var $this = $(this);
    $.ajax({
        url: $this.attr('rel'),
        success: function(data){
            $('body').fadeOut().html(data).fadeIn();
        }
    });
});

Если кто-то заходит на ваш сайт с хэш-кодом в URL, мы просто обнаруживаем его и загружаем соответствующую страницу; что-то вроде этого будет работать:

 $(function(){
    if(window.location.hash){
        if(window.location.hash.indexOf('#!') === 0){
            $.ajax({
                url: window.location.hash.replace('#!','')   '.php',
                success: function(data){
                    $('body').fadeOut().html(data).fadeIn();
                }
            });
        }
    }
});

1. Спасибо за ответ, я пытался по вашему предложению, но он не работает, не могли бы вы сказать мне, что я здесь делаю не так? paste2.org/p/1677031

2. Да $(this) , это выходило за рамки. Еще слишком рано 🙂 Смотрите обновленный код.

3. Еще раз спасибо, эта функция работает, но не тег contact href, если я получу URL-адрес, он загрузится успешно index.php #!контакт, но если я нажму на href, он просто изменит URL с index.php чтобы index.php #!контакт, но никаких изменений на странице.

4. Ну, мой пример предполагает несколько вещей, если вы используете его как есть. Предполагается, что у вашего якоря есть вызываемый класс nav-link , предполагается, что вы назначены rel="contact.php" , предполагается, что у вас есть страница php в том же каталоге contact.php , и, конечно, предполагается, что вы используете текущую версию jQuery. Что вы пробовали в плане отладки? Какие-либо ошибки отображаются в вашей консоли? Является ли вызов ajax успешным?

5. Редактировать: извините, я забыл добавить $(document). готово (функция () { вокруг кода теперь все работает нормально, спасибо за вашу поддержку 🙂

Ответ №2:

Термин, который вы ищете, — AJAX. «Последний параметр» — это не GET-параметр, а привязка, которая считывается JavaScript.

Некоторые советы по использованию этого метода можно найти на ajaxprojects.com

1. В большинстве случаев это ajax, но не обязательно ajax. Возможно, все содержимое было загружено на одной странице, и отображаются разные части. Термин — это привязка / хэш, который устанавливается location.hash и повторяется оттуда.