X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> HTML5 History API
ZhukV
ZhukV
Topic Starter сообщение 7.3.2012, 11:02; Ответить: ZhukV
Сообщение #1


В посте хотелось бы рассказать о прикольной штуке - HTML5 History.

Данная технология позволяет использовать ajax при этом сделать нормально рабочими кнопки - "Назад"|"Вперед"

Здесь не буду писать, что и как, найдете в гугле или на хабре.

Поехали:

При создании приложения на JS возникает всегда вопрос о кешах, тем более, если сервер под высокими нагрузками. Один из лучших вариантов - кеширование со стороны сервера и со стороны клиента + загрузка данных AJAX

Предположим, что у Вас уже есть где-то аякс на странице, и Вы хотите красиво прикрутить к нему Hisotry.

Для прикрутки используется метод - pushState обекта window.history
НО!!! Не все браузеры поддерживают History, значит нужна еще и проверка.

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

На прикручном событии достаем елемент истории и тыкаем туда, куда нужно.

Вот весь код:

[JS]
/******************************************
* HTML5 HISTORY STATE
*****************************************/
var H5H = {};
/**
* Push state to history element
*/
H5H.pushState = function(data, title, url, ga) {
if (!data && !title && !url) { return false; }
if (typeof window.history == 'undefined' || typeof window.history.pushState == 'undefined') { return false; }
if (typeof ga == 'undefined') { ga = true; }
if (ga && typeof _gaq != 'undefined') { _gaq.push(['_trackPageview', url]); }
$('head title').html(title);
return window.history.pushState(data, title, url);
}

/**
* Callback to event listener
*/
H5H.callbackEvent = function(d) {
if (typeof d.state == 'undefined' || !d.state) { return true; }
// В d.state Вы будете иметь обект, который записали при помощи - pushState
return true;
}

window.addEventListener('popstate', H5H.callbackEvent);
[/JS]

В коде также предусмотрена статистика переходов по страницах, если установлен Google Analytics.
Использование урла (у параметр), желательно, тогда у Вас красиво и измениться адресная строка без перезагрузки.

Рабочие пример - http://apprus.ru/ (Кликаем по фильтрах на главной странице)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 7.3.2012, 12:42; Ответить: Alcorn
Сообщение #2


Вконтакте используют history + локалстораж + лонг пол, вообще их опыт интересно/полезно посмотреть в докладах.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
Topic Starter сообщение 7.3.2012, 14:24; Ответить: ZhukV
Сообщение #3


Ну для начала я думаю что не плохо и юзверить History в HTML5, так как он действительно уменьшает нагрузку на сервер + делает сайт более динамическим
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 7.3.2012, 14:34; Ответить: Alcorn
Сообщение #4


Это (аяксовый сайт) можно было делать и раньше, но только с якорем (#) и постоянным опросом урла (одна из подобных либ - history.js). С html5 history конечно проще, но для совместимости всё равно придётся использовать старый подход.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 8.3.2012, 1:00; Ответить: Arks
Сообщение #5


в начале прошлого года где-то делал сайты вида "везде history API" а если древний ie тогда редирект на адрес с октоторпом(якорь). Если страничка открывается не через ajax-транспорт, тогда редирект на адрес стоящий после якоря. Т.е. все прекрасно работало, и по F5 ajax-формы без проблем переносили куда надо. В ie конечно адреса вида /manage/realty/home/id/5#?metro=false&duration=10&time=minutes$year=2004&cond=since выглядели не очень красиво, но свою роль выполняли.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
devote
devote
сообщение 8.3.2012, 4:44; Ответить: devote
Сообщение #6


Рекомендую посмотреть вот на это решение http://code.spb-piksel.ru/?history.latest.zip в старых браузерах отпадут проблемы само собой. Библиотека интегрирует в старые браузеры поддержку HTML5 History API. Там есть мелкий нюанс описанный в файле readme. Но не думаю что это приведет к проблеме.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 8.3.2012, 4:56; Ответить: Alcorn
Сообщение #7


Вот и остаётся для одной и той же страницы одним браузерам выдавать один uri, а другим другой, что не очень то хочется делать. В Опере history совсем недавно появился, с 11.50, пришлось обновиться с 11.10 до 11.61, чтоб потестить во всех браузерах. Там ещё заметил, что в Хроме onpopstate срабатывает при открытии страницы, то есть не у всех всё одинаково. Мне кажется проще сделать так - тем браузерам, которые поддерживают html5-history, делаем на history, остальным - обычные переходы.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 8.3.2012, 5:10; Ответить: Alcorn
Сообщение #8


(devote @ 8.3.2012, 07:44) *
Рекомендую посмотреть вот на это решение http://code.spb-piksel.ru/history.latest.zip в старых браузерах отпадут проблемы само собой. Библиотека интегрирует в старые браузеры поддержку HTML5 History API. Там есть мелкий нюанс описанный в файле readme. Но не думаю что это приведет к проблеме.


Там как и везде - старый добрый костыль с якорями - hashchange (тем браузерам, которые не понимают - опрос якоря-hash в цикле по setInterval каждые 100мс), создание скрытого iframe, чтобы кнопки назад/вперёд работали в старых IE и прочие прелести.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
devote
devote
сообщение 8.3.2012, 5:19; Ответить: devote
Сообщение #9


(Alcorn @ 8.3.2012, 07:56) *
.... Мне кажется проще сделать так - тем браузерам, которые поддерживают html5-history, делаем на history, остальным - обычные переходы.

Никто не спорит что проще, но против желаний заказчика не всегда пойдешь. Либо делаем как он хочет, либо делает другой так как он хочет. Так что выбирать один фиг не нам (программистам).
(Alcorn @ 8.3.2012, 08:10) *
Там как и везде - старый добрый костыль с якорями - hashchange (тем браузерам, которые не понимают - опрос якоря-hash в цикле по setInterval каждые 100мс), создание скрытого iframe, чтобы кнопки назад/вперёд работали в старых IE и прочие прелести.

Ну это понятно что якорь, уж ничего с этим не сделаешь. А насчет setInterval дык это тока в ИЕ ниже 8-й версии, ибо дальше уже по событию отлов идет. Просто эта библа по максимуму не дает извращаться программистам задумываясь о старых браузерах. По сути подключил и пиши как писал, не особо думая о написании дополнительных костылей.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) ✅ sms.chekons.com - ⭐ Сервис для получения SMS на реальные номера USA "Non-VoIP, безлим SMS, API" ⭐
Сервис для получения SMS на реальные номера USA
13 Chekon 4099 18.4.2024, 11:48
автор: Chekon
Открытая тема (нет новых ответов) Интеграция спортивных данных API. Коэффициенты БК, Live результаты
15 yaroslav89 6871 8.4.2024, 17:17
автор: spoyer_ru
Открытая тема (нет новых ответов) Продажа аккаунтов ChatGPT (OpenAI / DALL·E) с балансом API KEY 5$
10 Gagablik 2967 13.2.2024, 0:05
автор: malamut
Открытая тема (нет новых ответов) Аналог YouDO: Android приложения, веб + backend/api
6 kwork 6628 28.8.2023, 20:04
автор: mikmaster22
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44941 19.7.2023, 10:03
автор: qpPeW


 



RSS Текстовая версия Сейчас: 25.4.2024, 10:22
Дизайн