Я уже давно заметил, что во всеми нами любимой соц. сети «В Контакте» появился некий скрипт, который изменяет url без перезагрузки страницы, Но я не придавал этому особое значение. Но вчера заинтересовался как это сделано. Весь секрет в управлении историей, а конкретно в нехитрой javascript-функции history.pushState, которая появилась в html5. У многих html5 ассоциируется с отсутствием кроссбраузерности, поэтому вышеупомянутая функция работает не везде. Поддержка есть в Firefox 4+, Safari 5+ и Chrome 8+. Эта функция позволяет изменять адрес, находящийся после слэша. Если соединить это с ajax, можно создать эффект быстрой перезагрузки страницы. Что собственно и сделали разработчики ВК, обманув посетителей. Ну, хотя, может они не обманывали никого, загрузка действительно стала быстрее, но… Забудте. На самом деле эта функция очень полезна, например, в случаях если больше половины контента на всех страницах сайта идентичная. Я покажу Вам как это работает на практике. Мы создадим вкладки, изменяющие контент и адрес в браузере. Не без помощи jQuery естественно. Итак, создаём html-файлик с именем… ну допустим, first.html. Стоим каркас. Обычные ссылки, внутри обычной таблицы.
$(function($){ /* Биндим функцию на клик */ $('.links a').attr('onclick','return false;').click(function(){ /* Запоминаем адрес ссылки */ var href = $(this).attr('href'); /* Добавляем надпись загрузки по вкусу */ $('.wrapper').text('Loading...'); /* Загружаем в объект с классом «wrapper» объект с классом «content» с другой страницы */ $('.wrapper').load(href+' .content', function(){ /* Меняем текст в адресной строке на тот, что был в адресе ссылки */ history.pushState(null, null, href); }); }); }); /* Happy End */
То, что должно получиться можно просмотреть и скачать по ссылкам ниже. (Данный код работает только на сервере) Демо | Архив Источник: www.frostart.ru
Frоst, демо посмотрел, я давно именно это и искал, вот только нельзя сделать, чтоб в строке адреса было небольшое изменение (Например сам документ остается - /first.html , а если переходишь на другой док., то в строке адреса это отображается не переходя на другой документ - /first.html?s=2 и т.п.) ? Если сможешь буду очень благодарен! trollhaus.ru - все уже там!
Frоst, ну смотри, все точно так-же как и сейчас, только при переходе на сл. документ, у изначального URL добавляется, но не изменяется. Пример: Было - /first.html Перешел на second.html Стало - /first.html?s=2 trollhaus.ru - все уже там!
Цитирую Frоst Изменение адреса без перезагрузки страницы
Гостик, пример взят был с соц. сети "В Контакте" у них тоже не работают кнопки "назад вперёд"? или взять одноклассники... у них тоже Изменяется адрес без перезагрузки страницы, но история работает.
alex11wa, лично у меня работают кнопки истории, если учесть адресную строку. А чтобы контент менялся через ajax, нужно писать отдельную функцию.
Quote (alex11wa)
пример взят был с соц. сети "В Контакте" у них тоже не работают кнопки "назад вперёд"? или взять одноклассники
В одноклассниках нет данного метода. Там адресная строка меняется после символа "#". После него адрес меняется без перезагрузки в любом браузере без всяких скриптов. Тоже самое на фейсбуке и в твиттере.
В одноклассниках нет данного метода. Там адресная строка меняется после символа "#". После него адрес меняется без перезагрузки в любом браузере без всяких скриптов. Тоже самое на фейсбуке и в твиттере.
Frost, если я правильно понял... то, для того чтобы работали кнопки надо использовать якорь? (#) но, метод который ты показал интересней... может есть для него решение?
alex11wa, ты меня не понял. Этот метод создан для манипулирования историей. Т. е. в истории адреса должны сохраняться, исходя из этого, можно смело предположить, что кнопки истории тоже должны работать. Возможно проблемы с браузером. Попробуй в моём демо использовать кнопки истории через другие браузеры. А про якорь я упомянул только чтобы исправить твоё неверное предположение об одноклассниках. Там суть другая.
кнопки истории не работают и работать не должны - все елементарно просто, ведь фактически Вы остаетесь на 1-м документе, так как же Вам сработает история?
Forst, я папробывал ваше демо, я видемо не так поставил был вопрос! прошу прощения! кнопки работают, но при нажатии не подгружают те страницы которые соответствуют URL, то есть адрес меняется, а контент остаётся прежним. Получается что у пользователя пропадает возможность перейти назад или вперёд?
Этот метод создан для манипулирования историей. Т. е. в истории адреса должны сохраняться, исходя из этого, можно смело предположить, что кнопки истории тоже должны работать.
Читать умеем? История должна работать. Если не веришь, можешь погуглить.
alex11wa,
Quote (Frоst)
А чтобы контент менялся через ajax, нужно писать отдельную функцию.
Смену контента я создал для наглядного применения метода. Чтобы вместо с историей он менялся нужно писать отдельную функцию. Сам метод только меняет адресную строку.
Смену контента я создал для наглядного применения метода. Чтобы вместо с историей он менялся нужно писать отдельную функцию. Сам метод только меняет адресную строку.
да, да это я и имел ввиду что адрес URL меняется, а контент нет! Frost, извиняюсь за навязчивость)) а вы знаете как написать такую функцию которая будет и контент менять при переходе НАЗАД ВПЕРЁД??