Как "добавить в закладки" страницу или контент, загруженный с помощью AJAX?

Как "добавить в закладки" страницу или контент, загруженный с помощью AJAX?

Похоже, что это может быть легко, если мы просто добавим детали к "якору", а затем используем маршрутизацию или даже код PHP или Ruby on Rails route.rb, чтобы перехватить эту часть, а затем показать содержимое или страницу. соответственно? (показать всю страницу или частичное содержание)

Тогда это может быть очень просто? Похоже, это то, как это делает Facebook. Каковы другие хорошие способы сделать это?

Источник

5 ответов

Решение

Я перепробовал много пакетов. Плагин jQuery History кажется наиболее полным:

http://github.com/tkyk/jquery-history-plugin

Источник

Обновление: теперь есть HTML5 History API (pushState, popState), который не поддерживает HTML4. hashchange функциональность. History.js обеспечивает кросс-браузерную совместимость и дополнительный hashchange отступление для браузеров HTML4.

Для хранения истории страницы наиболее популярным и полнофункциональным способом является использование хэш-чангов. Это означает, что говорят, что вы идете из yoursite/page.html#page1 в yoursite/page.html#page2 Вы можете отследить это изменение, и поскольку мы используем хэши, их можно выбрать по закладкам и кнопкам "назад" и "вперед".

Вы можете найти отличный способ привязки к изменениям хеша, используя проект истории jQuery http://www.balupton.com/projects/jquery-history

Для этого также имеется полнофункциональное расширение AJAX, позволяющее легко интегрировать запросы Ajax в ваши состояния / хэши, чтобы превратить ваш веб-сайт в полнофункциональное приложение Web 2.0: http://www.balupton.com/projects/jquery-ajaxy

Они оба предоставляют отличную документацию на своих демонстрационных страницах, чтобы объяснить, что происходит и что происходит.

Вот пример использования jQuery History (взятый с демонстрационного сайта):

// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
    // Update the current element to indicate which state we are now on
    $current.text('Our current state is: ['+state+']');
    // Update the page"s title with our current state on the end
    document.title = document_title + ' | ' + state;
});

// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
    // Update Menu
    updateMenu(state);
    // Show apricots tab, hide the other tabs
    $tabs.hide();
    $apricots.stop(true,true).fadeIn(200);
});

И пример jQuery Ajaxy (взятый с демонстрационного сайта):

        'page': {
            selector: '.ajaxy-page',
            matches: /^\/pages\/?/,
            request: function(){
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
                // Adjust Menu
                $menu.children('.active').removeClass('active');
                // Hide Content
                $content.stop(true,true).fadeOut(400);
                // Return true
                return true;
            },
            response: function(){
                // Prepare
                var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
                // Adjust Menu
                $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
                // Show Content
                var Action = this;
                $content.html(data.content).fadeIn(400,function(){
                    Action.documentReady($content);
                });
                // Return true
                return true;

И если вы хотите получить параметры строки запроса (так yoursite/page.html#page1?a.b=1&a.c=2) вы можете просто использовать:

$.History.bind(function(state){
    var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}

Так что ознакомьтесь с этими демонстрационными ссылками, чтобы увидеть их в действии и узнать все подробности установки и использования.

Источник

Проверьте это, что-то может вам помочь:

  1. Как изменить URL из JavaScript: http://doet.habrahabr.ru/blog/15736/
  2. Как упаковать состояние приложения в URL: http://habrahabr.ru/blogs/javascript/92505/
  3. Описание подхода: http://habrahabr.ru/blogs/webstandards/92300/

Примечание: все статьи на русском языке, так что либо Google Translate их, либо просто просмотрите код и угадайте детали.

Источник

Взгляните на одностраничный манифест интерфейса

Источник

Если вы используете jquery, вы можете сделать это простым способом. просто используйте плагин ajaxify. он может управлять закладками страниц AJAX и многим другим.

Источник
Другие вопросы по тегам