JSNAV

    Навигация по странице


    Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:



    Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

    Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

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

    Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.

    К примеру:
    jqapi.com/#p=jQuery.ajax
    jqapi.com/#p=height
    jqapi.com/#p=addClass

    В этом случае после загрузки страницы по якорю в ссылке можно просто восстановить и показать запрашиваемое содержимое.

    К сожалению, на данный момент каждый изобретает свои велосипеды для решения проблемы кодирования в якоре текущего содержимого документа. Нет единого стандарта кодирования якорей. Кроме того, разработчики зачастую забывают для чего изначально использовались якоря и лишают пользователя возможности навигации внутри документа.

    Чтобы как-то решить эти проблемы к нам в голову с хабраюзером gbezyuk пришла идея создания библиотеки JSNAV, которая помогает решить указанные выше проблемы.

    Как это работает?

    JSNAV кодирует вызовы JavaScript обработчиков в URI документа. Для кодирования используется RFC1630 совместимые URI следующего вида:
    user:pass@host:port/path/resource?query#anchor;navEventName;param1;param2;...

    Cинтаксис якоря страницы:
    • до служебного символа # URI страницы ничем не отличается, от указанного в стандарте, изменения касаются лишь синтаксиса якоря
    • сразу же после # и до символа; идёт обычный HTML якорь со стандартным действием (прокручивание страницы до элемента якоря)
    • после якоря идёт служебный символ; и указывается имя события
    • далее через символ; идёт список параметров, с которыми будут вызваны обработчики событий; параметры закодированы в URL encoding в байтовой кодировке UTF-8

    Библиотека после загрузки страницы начинает следить за изменениями URI по переменной window.location.href и, в случае его изменения, вызывает зарегистрированные обработчики.

    JSNAV так же поддерживает работу с и обычными якорями: в случае перехода по ссылке с якорем производится scrollTo к элементу якоря. При этом в URI сохраняется описание последнего зарегистрированного события.

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

    var addClassHandler = function(className, textId) {
      var elm = textId? document.getElementById(textId) : this;
      if (elm.className && elm.className.indexOf(className) < 0) {
        elm.className += " " + className;
      }
    }
    JSNAV.bind("addClass", addClassHandler);


    Обработчик addClassHandler из примера будет вызываться на URI вида:
    • test.html#;addClass — вызов addClassHandler() в контексте window.document.body
    • test.html#;addClass;className — вызов addClassHandler('className') в контексте window.document.body
    • test.html#;addClass;className;elementId — вызов addClassHandler('className', 'elementId') в контексте window.document.body
    • test.html#anchor;addClass;className — вызов addClassHandler('className') в контексте элемента якоря (элемента с id=='anchor' или name=='anchor') и прокрутка до элемента якоря

    JSNAV

    Библиотека написана на pure JS и, по идее, не должна конфликтовать ни с одним из известных фреймворков.

    Зарепортить ошибку, предложить патч или скачать код можно на сайте проекта. Исходники доступны под Apache2 License.

    Посмотреть, как всё это работает можно в примере на этой странице.

    P.S.

    Буду рад услышать комментарии, пожелания, получить баг-репорты. Кроме того приглашаю всех желающих присоединиться к разработке кода и документации.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 97

      +6
      Я слоупок, но за jqapi.com спасибо. А то я для быстрой справки до сих пользуюсь visualjquery.com :(
        +3
        Поддержу своим Спасибо — вообще пользовался оф. сайтом Jquery
          0
          Все на одной странице с переходом на офиц. документацию:
          www.futurecolors.ru/jquery/
          +16
          Решение конечно достойное, но неудачное:
          1. Что такое анкер-навигация и какие цели она преследует? Это возможность сохранить ссылку, для того чтобы в последстии вставить в адресную строку, и перейти на указанный урл. А не вызов определенных методов у dom-объектов.
          2. Этот урл должен быть красивым и легкочитаемым… Роутинги в др. языках это показывают. Т.е. вместо host/path/resource#anchor;params;... лучше делать uri похожие на host/path/resource#method/params/.... Это более красиво. К тому же, для гугля и для noscript можно использовать: host/path/resource/method/params/..., т.е. просто заменив # на / мы не потеряем функциональности проекта.

          А так решение красивое. +1
            +2
            Интересное соображение.

            Заменить; на / можно легко. Я выбирал символ разделителя исходя из стандарта URL encoding — он не должен заменяться на то-то типа %xx. Символ / вполне для этого подходит. В следующей версии я изменю символ разделителя.
              +2
              Эмм… Решение удачное, но ему есть куда расти, с вашего позволения.
              –3
              Идея отличная, но реализовать конечно нужно как посоветовал aavezel выше.
                +7
                «Нет единого стандарта кодирования якорей.», ибо есть HTML5 History API.
                  0
                  и как это помогает переслать ссылку другому пользователю?
                    0
                    в смысле прямо сегодня?
                      +1
                      HTML5 History API предоставляет нам возможность изменить сам url, а не хэшик. В итоге вы получаете полноценную ссылку, по которой можно пройти и получить желаемое без всяких там последующих преобразований на стороне клиента, то бишь сформировать все на сервере. В случае же с хэшиком такого сделать не получится, ибо он на сервер не передается. Собственно — html5demos.com/history (увы, серверная часть в демке не реализована, но ничто не мешает сделать ее самому :) ).
                        +1
                        Ну как бы это не совсем правда: якорь передаётся на сервер в случае прямого GET запроса.

                        Плюс опять же вопрос «как это поможет мне прямо сегодня?». JSNAV работает даже в линксе, а вот History пока что полноценно фурычит лишь в хроме и фф.
                          +1
                          Я и не спорю, что History работает только в передовых браузерах, но вот про передачу хешика на сервер я слышу впервые.
                            +1
                            однако, передаётся :) можете просто проверить это
                            +1
                            разве jsnav будет работать в Линксе? там ведь только плейн-хтмл. я вот ссылка после html5 history будет работать даже в Линксе. Давно ждал эту возможность. Надеюсь, через год можно будет полноценно использовать
                              +1
                              линкс умеет JS
                                0
                                какой? когда я в последний раз смотрел свой lynx он про существование JS даже не догадывался
                    +7
                    Для справочника Ample SDK я сделал так:
                    если Javascript включен то внутренняя навигация осуществляется с использованием javascript/hash: www.amplesdk.com/reference/#/ample/runtime/ample.xml
                    если не включен то с использованием привычной query string www.amplesdk.com/reference/?/ample/runtime/ample.xml

                    если Javascript включен но пришли по ссылке www.amplesdk.com/reference/?/ample/runtime/ample.xml (например с Google), то она будет перенаправлена на www.amplesdk.com/reference/#/ample/runtime/ample.xml

                    P.S. Кстати в самом Ample SDK (Javascript GUI Framework) есть поддержка hashchange event согласно будущего стандарта HTML5
                      0
                      спасибо, посмотрю
                      +1
                      отмигрируйте на github.com — как никак, лучшая платформа для коллективного творчества
                        0
                        Мастер ноду GIT может держать и sourceforge. Чем github лучше?
                          0
                          легкими форками, pull-реквестами, активным сообществом.
                            –1
                            что насчёт trac?
                              0
                              Есть встроенный issue tracker. А также система на подобии patie.org (Gist) с историей изменений. Есть публичные и приватные репозитории.
                                0
                                * pastie.org
                                  –1
                                  Хочется иметь wiki систему, чтобы не делать сайт проекта. Собственно, по жтому меня и устраивает trac. Впрочем, мастер-ноду GIT можно перенести на github, а trac оставить на sourceforge. Как вам такой вариант?
                                    0
                                    wiki там тоже есть
                                      0
                                      И кстати, помимо собственно wiki, можно захостить сайт прям на github и хранить его исходники там же. Пример: neteye.github.com/
                                        0
                                        а вот это как?
                                          0
                                            0
                                            спасибо. правда не создаёт он репу =( ну я надеюсь починят…
                                    0
                                    И да, вики тоже есть.
                              0
                              Интересная вещь. Мы такое сами на коленке писали.
                                +1
                                млин нифига это не удобно.

                                По мне мой велосипед лучше чем ваш.

                                Берем создаем $.Router() у которого будут два паблик метода:
                                1) set — Изменить hash
                                2) bind (regExp, callback) — callback принимает строчку запроса. Уже объект принявший заботится дальше о корректности

                                При этом нужно еще одно это каждые 50-100мс проверять изменился ли адрес и если изменился то вызывающая соответствующие колбеки.

                                И того у мя вышло 80 строк. с красивым форматированием кода.

                                Следовательно дальше в системе описываем свои классы и объекты, в которых есть функция обработчик адрес, принимающая адрес.
                                Все никаких зависимостей и чистота кода.

                                А в вашем случае быдлокод напрашивается прям=)

                                  0
                                  >При этом нужно еще одно это каждые 50-100мс проверять изменился ли адрес
                                  в том же jQuery есть $(window) .hashchange()
                                    0
                                    не в jQuery, а в каком-то плагине к нему
                                      0
                                      Нее это не стандартные не подходящие мне скриптики.

                                      Проверка изменения hash-a делается по сути так (ну в сокращении без оберток)

                                      var prev ="";

                                      function changed() {}

                                      recheck = function() {
                                      if(prev != document.location.hash){
                                      prev = doucment.location.hash;
                                      changed();
                                      }
                                      }

                                      setInterval(recheck, 100)

                                      А не те 100500 строк не нужного кода в библиотке .hashchange() + еще поиск скрипта делающего то что мне нужно занимает больше чем написание нужного кода.

                                      Плюс суть моего скрипта от того каким образом происходит hashchange никак не меняется=)

                                      Мы используем регекспы, для определения нужно ли вызвать так сказать событие у определенного объекта hash чейнжед=)

                                      ну допустим делаем так

                                      Main = {
                                      hashChanged: function(){

                                      },
                                      init: function() {
                                      $.Router.bind("\/#Main(.)*", Main.hashChanged);
                                      }
                                      }

                                      И так далее=) красота

                                      0
                                      В результате имеем свой, велосипедный синтаксис: где-то хэшкод будет #p=abyrvalg, где-то #a/br/valg и т.д.

                                      Ну и внимательно следим за document.anchors, чтоб имена хэшей не пересеклись, так?
                                        0
                                        а не проще повесить обработчик на все ссылки, чем проверять интервально изменился ли якорь?
                                        ИМХО легче все ссылки с правильными ссылками давать, а через onclick делать своё нечистое дело…
                                          0
                                          Все зависит от задачи.

                                          Если задача такая, что у нас сайт и на нем куча ссылок по которым переход происходит, и одно поле $("#content") где мы заполняем результат от перехода, то да, проще сделать $(«a»).click(function(){some_code});

                                          Ну а если у нас есть дофига разнообразных объектов, которые зависят от текущего адреса, и каждый из этих элементов может адрес менять, то с вашим методом, возникнет очень много лишних строк, ошибок, зависимостей и код станет трудно редактируемым и нечитабельным, поэтому нужен именно маршрутизатор, который должен выполнять колбеки нужных функций для нового адреса.=)
                                            0
                                            Наверно я виноват, не дописал мысль до конца.

                                            Пишем в href обычные ссылки, какие и должны быть, хоть с анчорами, хоть с посылами на mailto, а при загрузке документа обрабатываем все $(«context a») и добавляем обработчик события по клику, стандартную функцию для всех, отдавая назад this.href, а при её выполнении производим всё тот же парсинг.

                                            Те же мухи, тока без постоянно опроса.
                                              0
                                              Нет не виноваты=-) я вас прекрасно понял.

                                              Ну вы путаете немного…

                                              Во-первых прослушка не юзает никаких ресурсов, ее можно даже в 200мс сделать (при современных мощностях, 1 проверка одной булевой переменной в 200мс фигня), при этом она используется ТОЛЬКО тогда когда пользователь САМ забивает адрес в адресбар.

                                              Пы.Сы. Вот и возникает проблема, пользователь ввел адрес в строчку, как обработать этот адрес? код какой ссылки нужно обработать? =)

                                              Во-вторых вы опять таки меня не поняли, я же сказал, для первой задачки ваш метод лучше, т.к. проще.

                                              Но если у вас есть >10 взаимо-свзяаных объектов не ссылок, каждый из которых меняет состояния другого.

                                              Ваш подход, заставляет каждому из >10 элементов знать про другие >9 и вызывать методы из других 9ти и каждый из этих элементов должен как то устанавливать другие >9… Будет просто каша которую не разрести, будут странные и не отлавливаемые ошибки и тп и тд… И вся система будет держатся на соплях.

                                              Мой же метод позволяет каждому элементу знать, только о себе, и иметь одну функцию, которая принимает адрес, причем который заведомо относится к данному элементу, обрабатывая адрес устанавливать себя как нужно. Дальше если этот объект вызывает изменение адреса, все остальные которых будет касаться этот адрес себя установят как надо.

                                                0
                                                > Пы.Сы. Вот и возникает проблема, пользователь ввел адрес в строчку, как обработать этот адрес? код какой ссылки нужно обработать? =)

                                                Вот именно, какой?
                                                Я в текущий момент ещё ввожу ссылку, а эти 200мс уже отработали и проверили — адреса не сходятся! и пробует грузить новый, а там — шиш на постном масле ))
                                                Причём пока я буду набирать — это ситуация будет повторяться неоднократно.
                                                И не надо аргументов, что «как только встретится существующий идентификатор», потому что могут быть ситуации с идентификаторами «xxx» и «xxxbbb»

                                                На счёт путаницы — согласен, но думаю и тут возможно это продумать.
                                                  0
                                                  пока ты не нажмёшь enter адрес страницы не изменится

                                                  когда ты нажимаешь кнопки вперёд/назад адрес меняется

                                                    0
                                                    а, ну да, чего это я…
                                        0
                                        Столкнулся со странным поведением на странице с примером.
                                        При повторном нажатии на одну и туже ссылку, например на ссылку «two» в списке «add highlight», то ничего не происходит. Не происходит повторного перехода по якорю, как в случае с «Simple bookmarks».
                                          0
                                          угу. баг. исправлю.
                                          +2
                                          Одна из основных проблем в такой навигации является проблема индексации сайтов.

                                          Думаю будет не лишним добавить ссылку, на предложение от Google по поводу решения этой проблемы (там и про способ формирования URL немного есть).
                                            –1
                                            Гугл умеет выполнять javascript и индексировать AJAX страницы. Одна проблема — это происходит медленнее.

                                            А вот если говорит про рунет — то у яндекса с этим проблемы, да.
                                              0
                                              кстати, а что мешает поисковику делать запрос вида example.com/page?query#state а серверу отдавать соответствующее содержимое?
                                                0
                                                по идее, ничего не мешает кроме особеностей реализации пауков
                                            +2
                                            я предпочитаю использовать facebook-style урлы.
                                            все ссылки работают без яваскрипта, если что.
                                            а если яваскрипт есть, то работает аякс, в строку после «#!» добавляется адрес кликнутой ссылки.
                                            Если перейти на эту страницу с хэшем (типа «#!/new_page.html»), скрипт находит ссылку на new_page.html на странице и кликает в нее.
                                            Делается все это очень просто и без плагинов.
                                            Можно конечно усовершенствовать и сделать все совсем красиво и элегантно «под капотом», но мне пока лениво
                                              0
                                              тут есть 2 проблемы:
                                              организация вперед/назад навигации и скролл в начало страницы после смены хеша, как вы это решаете?
                                                +1
                                                вперед назад работает.
                                                хэши записываются в историю, ловим hacheChange и счастье.
                                                а скролл в начало — не происходит.
                                                хэш записывается яваскриптом: window.location.hache
                                                в этом случае браузер не подбрасывает страницу
                                                  0
                                                  не забывайте, что IE не записывает в историю переходы при которых изменяется хеш. поэтому при нажатии назад на вашем примере попадаем на первую страницу сайта
                                                    +1
                                                    это да. и события изменения хэша там нет.
                                                    но вроде бы есть какие-то хаки, надо уточнить.
                                                    я обычно позволяю себе делать деградацию для этого у**ища
                                                    0
                                                    ой, извините пожалуйста. я из вашего комментария подумал, что вы автор топика
                                                      0
                                                      Так наоборот надо чтобы подбрасывало вверх, а то внизу по ссылке нажмешь и на новой подгруженной странице там же остаешься.
                                                        0
                                                        это нужно далеко не всегда.
                                                        и скорее реже нужно, чем не нужно.
                                                        при необходимости, страница поднимается яваскриптом очень просто
                                                    0
                                                    Ричаппликухи типа фейсбучных ещё писать уметь надо. REST API и всё такое.

                                                    Большинство же разработчиков (особенно на западе) не поднимаются выше вопросов типа «как прикрутить компоненту к джумле».
                                                      0
                                                      ну я, конечно, такие аппликухи не пишу ))) но стараюсь делать чтоб было хорошо, удовлетворяя собственные желания и амбиции)
                                                    +2
                                                    пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

                                                    Одному мне кажется лицемерным говорить об экономии пары десятков байт в эпоху широкого распространения p2p сетей?
                                                    Но вот проблема: URL страницы.

                                                    А, то есть проблема индексации страницы поисковиками никого уже не волнует?
                                                      0
                                                      но ведь это еще и красиво :) в эпоху web 2.0 :)
                                                      хотя мне кажется такие вещи удобны в основном для админок, сам пользуюсь плагинами от ExtJS :)
                                                        0
                                                        Это очень удобно для пользователя в плане отзывчивости интерфейса: кликнул в меню и сразу получил результат. Я считаю, это настолько прекрасно, что нельзя стыдиться говорить (и писать) об этом.
                                                          0
                                                          webo.in/articles/habrahabr/54-psychology-web-performance/
                                                          Раздел «Эффекты медленной скорости загрузки»
                                                          0
                                                          По-моему идея плохая. Не нравится этот ворох колбеков с параметрами, передаваемый особым образом в URL. Я считаю, что нужно использовать что-то типа рoутера. Т.е. у нас на входе URL вида /section/subsection/#anchor/section1/section2/?query=param1¶m2. Первая часть после # это родной якорь. Дальше URL, парсим в объект на JS.

                                                          Объект будет вида:
                                                          { anchor: '...', section: '...', subsection: '...', params: { query: '...', .... } };
                                                          


                                                          Дальше в JS файлах, где нужно что-то сделать в зависимости от якорного URL регистрируем обработчики по регуляркам, которые могут совпадать с частью URL и в колбек-функцию передаем наш объект:
                                                          $.History.bind('/section1/section2/', function(urlData) {
                                                            alert(urlData.params.query);
                                                          });
                                                          


                                                          Реализация же может быть на чем угодно, хоть на onhashchange, хоть на постоянной проверке по таймеру, хоть на HTML 5 History (но потребует некоторого допила, т.к. onpopstate вызывается только при переходе по истории).
                                                            –1
                                                            Мысль с сабсешинами здравая, но вот ?query=param1¶m2 — пережиток CGI.
                                                            URI получается громоздким
                                                              0
                                                              вот то о чем вы говорите www.bennadel.com/resources/projects/cormvc/demo/index.htm есть готовый пример
                                                              –1
                                                              вы смотрели fullajax.ru/?
                                                                0
                                                                Нет, ранее не видел.
                                                                К сожалению, у меня в опере как-то не очень работает.
                                                                  0
                                                                  Интересный подход у них — лого на Флеше…
                                                                  0
                                                                  Если использовать служебный символ "#" то аджакс контент рискует быть не-проиндексированмым гуглОм, т.к. у них есть стандарт по индексации аджакс контента, служебный символ "#!", и дальше костыли для открытия урла который включает в себя служебный символ…
                                                                    0
                                                                    Насколько я понял, ничто не мешает добавлять #! в конец якоря.

                                                                    Кроме того, встречаются ситуации, когда контент не подгружается, а изначально присутствует на странице со стилем display:none и показываться по нажатию на служебные элементы.

                                                                    Такие ситуации как обрабатывать?
                                                                      0
                                                                      думаю никак. для правильной индексации аджакс контента (гуглом, про яндекс не знаю) надо изначально выбирать подходящую архитектуру веб-приложения.
                                                                    0
                                                                    По-моему, такая навигация есть признак дурного тона. А приведённое решение — это громоздкий и неудобный костыль, частично решающий проблему, частично её усугубляющий.

                                                                    На мой взгляд, исключение, когда «анкорная» навигация уместна, составляют галереи картинок, как например тут: www.artgorbunov.ru/projects/thebat/gallery/#2
                                                                    То есть когда анкоры соотвествуют:
                                                                    а) строго последнему уровню вложенности
                                                                    б) каким-то простым, однородным данным — единичной картинке или чему-то подобному
                                                                      +2
                                                                        0
                                                                        Оно самое. Только вот опять проблемы с обычными якорями.
                                                                          0
                                                                          ну ничто же не мешает добавить одним из параметров идентификатор фрагмента и прогручивать к нему. причём лучше делать это средствами браузера: создаётся фрейм, который растягивается на всё окно, и внутрь фрейма помещается содержимое текущей страницы. а в качестве хеша для фрейма задавать значение параметра fragment
                                                                            0
                                                                            фреймы — зло. их не обрабатывает линкс :)
                                                                              0
                                                                              links обрабатывает
                                                                        0
                                                                        Еще один пример, где подобная навигация более чем уместна:

                                                                        prostopleer.com/#/top/msk/nrj
                                                                          0
                                                                          Я не понимаю зачем городить огород?
                                                                          Во-первых, возникают естественные опасения, что такие страницы будут некорректно индексироваться поисковиками.
                                                                          Во-вторых — удобочитаемость ссылок. Плюс к тому, нужно что-то делать со ссылками в контенте, если они ведут в другой раздел этого же сайта.
                                                                          Когда-то и передо мной стояла такая задача. Мне кажется, такое решение выглядит несколько элегантнее:
                                                                          $('#navNewsButton')
                                                                              .attr('title', 'Новости')
                                                                              .attr('style', 'cursor:hand;cursor:pointer;')
                                                                              .bind('click', function(){
                                                                                $('#content').html('<div class="loading"><img src="/wp-content/themes/chel/images/loading.gif" alt="loading"><br/>Страница загружается</div>');
                                                                                $('#pageLayout').css('background-image', 'url(/wp-content/themes/chel/images/cbg_news.jpg)');
                                                                                $('#contentWrapper').load('/news/ #content', function(resp, stat, xhr){
                                                                                  var response = String(resp).replace(/\r\n/g, '');
                                                                                  var contents = response.match(/<script type=\"text\/javascript\">\nvar(.|\s)*?\/script>/gi);
                                                                                  for(i = 0; i < contents.length; i++){
                                                                                    var scriptBody = contents[i].replace(/<script type=\"text\/javascript\">/).replace(/<\/script>/);
                                                                                    jQuery.globalEval(scriptBody);
                                                                                  }
                                                                                });
                                                                                return false;
                                                                              });


                                                                          * Кусок взят из рабочего проекта и работает для одной копки

                                                                          При необходимости можно назначить всем ссылкам навигации в контексте сайта класс 'navi', спокойненько пройтись по ним при помощи each(), выдернуть ссылки на реальные страницы из аттрибута src и забиндить подгрузку страницы в блок контента по клику мыши. Не забываем вернуть false. Сюда же можно павернуть ещё кучу всего для любых ситуаций и на все случаи жизни.
                                                                          Имеем следующие преимущества:
                                                                          1. Естественная индексация роботами. Роботы не делают кликов, а грузят страницы.
                                                                          2. У пользователя отключен яваскрипт? Не беда! Он всё равно увидит контент, если перейдет по ссылке.
                                                                          3. В контенте есть скрипты (embed-видео например)? Скрипты будут выполнены.
                                                                          4. ???
                                                                          5. PROFIT!!!

                                                                          P.S. Если есь какие-то косяки — с радостью выслушаю замечания по коду и по идее. Это буквально мои первые шаги в jQuery.
                                                                            0
                                                                            «павернуть» = "навернуть"
                                                                            извините
                                                                              0
                                                                              Ну, в данном случае решается исключительно вопрос подгрузки страницы. Попробуйте открыть пример, который я привёл в топике — в этом случае я просто хочу сохранять подсветку определённого абзаца в URL страницы. На содержимое страницы такая подсветка не влияет.

                                                                              Сделать такое сохранение можно тысячью способов, я предложил ещё один — стандартный.
                                                                                0
                                                                                Да, согласен. Немного разные задачи и совершенно разные решения.
                                                                                +1
                                                                                У вас не решается задача, которая стоит у автора поста. А именно, работающая история браузера при смене состояния и возможность восстановить состояние интерфейса по URL. У вас просто реализована возможность что-то сделать по загрузке какого-то контента аджаксом. При этом реализована криво. Почитайте про кастомные события, многократно улучшите код и облегчите жизнь себе и последователям, которым придется работать с вашим доллар-супом.
                                                                                  0
                                                                                  Спасибо за замечания. Я ведь не волшебник, я только учусь =)
                                                                                +1
                                                                                Бурное обсуждение у вас тут, вставлю свои 5 копеек.

                                                                                Недавно вот закончил работу над проектом для заказчика, так какраз полная AJAX навигация, с красивыми якорями и прозрачным преобразованием URL из example.com/module/method/arg1/arg2.html в example.com/#module/method/arg1/arg2.html, которую юзеры даже не замечают. Если бы ещё можно было бы что бы браузеры умели при копировании URL преобразовывать такие урлы обратно в example.com/module/... вообще было бы супер.

                                                                                Кстати при этом, полностью поддерживаются поисковые роботы. Вобщем-то если вырубить JS перед заходом (или потом отрубить JS и не забыть удалить куку js_enabled (или как-то так, с головы не помню), то по сайту (по его публичной части) можно будет вполне ползать (единственное что вёрстка не совсем хорошая, из-за этого ползёт частично, но поисковому роботу то пофигу :D).

                                                                                Поглядеть можно тут: http://fizzer.ph/blogs.html. Регаться даже не пробуйте, оно чисто на филиппины и регистрация по мобильникам.
                                                                                  –1
                                                                                  А самое главное, что когда видишь как это сделано, оказываеться настолько легко, что удивляешься чужим потугам и тому огороду, который они городят.
                                                                                    +1
                                                                                    а нахрен там вам подгрузка контента аяксом? типа чтобы шапку и футер каждый раз не грузить? ну так их и грузите аяксом и закешируйте намертво
                                                                                      0
                                                                                      AJAX'ом грузятся и другие части сайта, просто в публичной части доступен только основной контент. Ну и переходы делаются гораздо быстрее + lazy load по возможности.

                                                                                      Скажем так, это ещё было моя первая проба пера, сделующий проект будет лучше, продуманее и круче :D Опыт штука бесценная.
                                                                                        0
                                                                                        с чего бы переходам тут делаться гораздо быстрее? сделайте нормальное кэширование и у вас будет всё летать и лениво загружаться.

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

                                                                                        полновесная страница состоит из статического содержимого + 2кб хтмл. вынести статику в отдельный файл и закешировать — не проблема совершенно. разница будет байтов 100
                                                                                        0
                                                                                        В авторизованной части есть панель с чатами, оповещения — всё это работает без перезагрузки в live режиме. Отчасти поетому тоже сайт на AJAX сделан. Так же на филлипинах весьма хреновые каналы, для них разница в подгрузить 2КБ HTML или полновесную страницу очень большая, даже с учётом кешей браузеров (которые не идиальны) первая версия была весьма тосклива. Так что причин несколько.
                                                                                    0
                                                                                    ребята молодцы
                                                                                    может скоро не придется изобретать велосипеды :)
                                                                                      0
                                                                                      возможно оно и так, но изобретение велосипедов позволяет развивать (или поддерживать) смелкалку, ум и всё такое )

                                                                                    Only users with full accounts can post comments. Log in, please.