Dr2005alex |
|
---|---|
Выставляю на обсуждение небольшую доработку ajaxHelper Так как ajaxHelper подставляет hash данные для ajax загрузки в адресную строку, он немного портит её вид. Она становится типа. http://ваш сайт/#get-light_page;blog/cotonti/; Все это ради сохранения истории браузера, НО.... ведь можно историю переписать так, как нам надо. В общем мое предложение: Что бы ссылки были того же вида каки без ajax. Тоесть не http://ваш сайт/#get-light_page;blog/cotonti/; а http://ваш сайт/blog/cotonti/ Пример данной реализации уже работает на сайте http://dev.ob4aga.ru/ Предложение добавить в base.js перезапись истории с передачей данных для ajax Изменим кусок кода из base.js $('body').on('click', 'a.ajax', function() { var make_hash = ajaxMakeHash($(this).attr('href').replace(/#.*$/, ''), $(this).attr('rel')); $.historyLoad(make_hash); //dr2005alex history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, '')); /*------------------------*/ return ajaxError; }); тут history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, '')) Записывает данные для ajax в переменную rel и заменяет адресс на оригинальный. Далее нам надо отследить событие нажатие в браузере назад и вперед. Добавляем обработчик после данного кода. window.addEventListener('popstate', function(e){ ajaxPageLoad(history.state.rel); }, false);
Теперь при переходе назад/вперед вызывается функция ajaxPageLoad с сохраненными в истории данными для ajax загрузки страницы. Теперь мы имеем стандартые ссылки в адр. строке без хэша и работающий ajaxHelper как обычно. P/S Чем вам не Вконтакте? ))) Можно теперь и плеер слушать во время прогулок по сайту.... WebKaa.ru - Cotonti Relax
|
esclkm |
|
---|---|
Раньше это не делалось изза угадай какого браузера))))что и как и где проверено? Я 2 руками за
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты |
Dr2005alex |
|
---|---|
В данный момент тестируется на сайте. (ссылка в первом посте). Проверяю на совместимость с другими скриптами работающих на котонти.
WebKaa.ru - Cotonti Relax
|
Trustmaster |
|
---|---|
May the Source be with you!
|
Dr2005alex |
|
---|---|
Исправим дабы небыло ошибок
window.addEventListener('popstate', function(e){ ajaxPageLoad(history.state.rel); }, false); на window.addEventListener('popstate', function(e){ if(history.state !== null) {ajaxPageLoad(history.state.rel); } });
Добавлено 28 минуты спустя: Проверил в браузерах Chrome - OK Opera - OK Mozilla Firefox - OK Explorer 10 - OK WebKaa.ru - Cotonti Relax
|
|
This post was edited by Dr2005alex (2013-09-29 12:14, 11 years ago) |
esclkm |
|
---|---|
А ие помладше?
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты |
Dr2005alex |
|
---|---|
#38055 esclkm: у меня его нет, если есть желание зайди на сайт http://dev.ob4aga.ru с младшей версии.... WebKaa.ru - Cotonti Relax
|
Macik |
|
---|---|
Тема хорошая, но… `popstate` только с 10-й версии IE и ограничениями в Сафари. https://developer.mozilla.org/en-US/docs/Web/Reference/Events/popstate https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F |
Dr2005alex |
|
---|---|
Я предлагаю все сделать очень просто. Для тех кто пользуется старыми браузерами, эту фичу отключать и работать с хэшем в адрессной строке. А для продвинутых и фишку рабочую. В конце концов браузеры идут вперед и всеравно все будут поддерживать. Вобщем общий код получается такой function supports_html5(e) {return !!e;} $('body').on('click', 'a.ajax', function() { var make_hash = ajaxMakeHash($(this).attr('href').replace(/#.*$/, ''), $(this).attr('rel')); $.historyLoad(make_hash); if(supports_html5(history.replaceState)) history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, '')); return ajaxError; }); $( window ).bind( "popstate", function( e ){ if(history.state !== null && supports_html5(history.state) ) {ajaxPageLoad(history.state.rel); } }); Я тут добавил функцию проверки. Поддерживает ли браузер данный оператор. function supports_html5(e) {return !!e;} Если поддерживает , то исполняем, ну а если не поддерживает, то смотрите на hash в адрессной строке. Но ИМХО не правильно будет если усер скопирует адрессную строку с хэшем в ней и поделится с пользователем, в которой сама ссылка будет вести на страницу А а хэш на страницу Б. Добавлено 9 минуты спустя: обновил на сайте скрипт, можете тестить на разных браузерах. WebKaa.ru - Cotonti Relax
|
|
This post was edited by Dr2005alex (2013-09-29 21:29, 11 years ago) |
Dayver |
|
---|---|
глючит-глючит ... вот тыкнул тут по ссыле http://dev.ob4aga.ru крутанул до темы "Как заставить скрипт работать и после ajax загрузки страницы" тыкнул в нее .... почитал ... нажал Backspace страница подергалась в урле смотрим и видим вроде вернулись назад а тело все то же от пейджи а ведь должно было перегрузить до списка пейдже (хром, опра все последних версий) Добавлено 8 минуты спустя: тыканье в кнопку(стрелку) назад в браузере тоже самое происходит ... блин а как красиво должно было получится ..... хотя вот о обратной совсемтимости наверное не думал? а ведь тех кто сиену юзает наверное уже немало .... или решение будет работать парально давая поддержку старому формату работы аякс истории через хеш в адесной строке? Pavlo Tkachenko aka Dayver
|
|
This post was edited by Dayver (2013-09-30 20:24, 11 years ago) |
Dr2005alex |
|
---|---|
#38063 Dayver: Упс, точно. Посмотрюс... Добавлено 2 дня спустя: Потестил в свободное время, оказалось... что данный глук есть изначально в AjaxHelper. При возврате на страницу без хэша ничего не происходит. Теперь у нас есть красивый вариант ajaxHelper. Тестируем на http://dev.ob4aga.ru/ Теперь страница обновляется и при возврате назад и вперед, даже если нету хэша. Рабочий на данный момент код function supports_html5(e) {return !!e;} $('body').on('click', 'a.ajax', function() { var make_hash = ajaxMakeHash($(this).attr('href').replace(/#.*$/, ''), $(this).attr('rel')); $.historyLoad(make_hash); if(supports_html5(history.replaceState)) history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, '')); return ajaxError; }); $( window ).bind( 'load', function( event ) { if(supports_html5(history.replaceState))history.replaceState ({main:true}, '', location.href); setTimeout( function(){ $( window ).bind( 'popstate', function( event ) { if(supports_html5(history.state) && supports_html5(history.replaceState)) { if(history.state !== null && history.state.main)window.location = location; if(history.state !== null && history.state.rel)ajaxPageLoad(history.state.rel); if(history.state === null )history.replaceState ({main:true}, '', location.href); } }); },0); });
Данный вариант никак не изменяет работу ajaxHelper , а только маскирует его. Это означает что он работает в старом формате. Скрипт просто изменяет адресс в адрессной строке на более логичный а хэш сохраняет в истории браузера. При кликанье вперед/ назад - скрипт берет данные хэша из истории браузера. Тем самым поддерживает работу ajaxHelper. Единственное что я не тестировал, это работу с формами, т.к. нет никакого действующего примера использования ajaxHelper в данной ситуации. WebKaa.ru - Cotonti Relax
|
|
This post was edited by Dr2005alex (2013-10-02 19:29, 11 years ago) |
Dayver |
|
---|---|
Хотел глянуть да потыкать да вот
Pavlo Tkachenko aka Dayver
|
Dr2005alex |
|
---|---|
Сорри))) хостинг сдох..... сейчас все норм, можно ПотыКать и ПотеСтить) WebKaa.ru - Cotonti Relax
|
Macik |
|
---|---|
Алекс, тебе на заметку https://github.com/huboo/jquery-ajax-html5-cache Вдруг пригодится... https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F |
Dr2005alex |
|
---|---|
#38120 Macik: Спасибо, буду знать.. Добавлено 1 дня спустя: ну что? потыкали? кто нибудь тестил? WebKaa.ru - Cotonti Relax
|
|
This post was edited by Dr2005alex (2013-10-07 16:01, 11 years ago) |