Как сделать переключение вкладок на странице с загрузкой по AJAX и изменением URL?

Question

Пример обычного исполнения вкладок тут.

Но вкладки должны переключаться без перезагрузки. И должен меняться URL. Например с windows/images/ на windows/plans/.

Добавлено 1.

Я знаю, как можно сделать загрузку через ajax с сервера, чтобы изменить часть страницы. Но как это совместить с изменением URL windows/plans/ пока не совсем представляю.

Добавлено 2.

Как меняется URL без # и без редиректа тут: http://html5demos.com/history

score 1 · Answer 1 · edited Apr 12 '17 at 07:33

1

Строка изменит мир!

edited Apr 12 '17 at 07:33

Дух сообщества

1

answered Jan 26 '12 at 05:29

Artem

11,965

Правильно, ли я понимаю, что все версии IE в пролете: http://www.findmebyip.com/litmus/#mdz_historymanagement – komka Jan 26 '12 at 06:13
НУ это вполне возможно, глянь сайт контакта в 6-7-8 осле и послушай музыку и переходи по страницам и сразу будет понятно.
А так об осле дааавно нужно забыть, и вообще не показывать сайт тем кто заходит из под осла. пусть нормальные браузеры устанавливают.
– Artem Jan 26 '12 at 06:14
1

По хорошему нужно объявить день забастовки ишаку. – culebre Jan 26 '12 at 07:16
Да уже не день а год 2012 год смерти осла! – Artem Jan 26 '12 at 07:23

score 0 · Answer 2 · edited Jan 26 '12 at 14:03

Я бы сделал так (подробно описывать не буду, для этого документация есть, лишь логику объясню со своей колокольни). С сервака изначально присылать такое

<a class="ajaxLink" src="#первое">Ссылка при клике на которую, перехода не произойдет(return false), а будет выполнен скрипт, который сделает запрос(нужно так же отправить содержимое атрибута src на сервер, чтоб там выбрать что надо именно) на выполнение скрипта на сервере, этот скрипт (нужно его написать тоже) должен обработать запрос и вернуть нужный кусок хтмл кода, этот код следует положить в"#wrap" </a>
<a class="ajaxLink" src="#второе"></a>
<a class="ajaxLink" src="#третье"src="третье"></a>
<div id="wrap">Сюда будет загружаться динамически контент</div>

Сейчас вот читаю это все и мне кажется, что не понятно я как-то разъяснил, к тому это самый простой вариант, многого я не учел, но это общий вид решения задачи. Надеюсь полезно будет и главное понятно. P.S. Чтобы еще адресную строку изменить нужно символ # поставить в УРЛ, а то браузер запросит этот урл.

Правильно ли я понимаю, что это описание работы ajax? Плюс напоминание, что нужно не забыть добавить в URL #? С ajax проблем нет. Воспользоваться window.location.hash я тоже смогу. Но как менять URL на blabla/blabla без перезагрузки. Ведь, если меняем location, то происходит редирект. Как тогда работает вот это: http://html5demos.com/history — komka, Jan 26 '12 at 05:33
Если в адресной строке будет # - то адрес не загрузится, просто измениться адресная строка, а вот реализовать подобное без # , это HTML5. — triplustri, Jan 26 '12 at 10:46
То, что с # не грузится страница это понятно, а с HTML5 реализовать можно через window.history.replaceState, но тут IE<10 в пролете. asdf — komka, Jan 26 '12 at 20:09

score 0 · Answer 3 · answered Jan 26 '12 at 14:26

0

Из соображений безопасности вообще запрещено менять что-либо в адресной строке. Можно дописать, либо использовать # или ?. Поэтому тут решайте сами забывать ли про ЧПУ. К тому же, если вы хотите менять ссылки для поисковиков, то это не поможет, т.к. активное содержимое сайта при индексировании игнорируется. Если вы всё подгружаете аяксом, то в индексе будет только одна страница, не зависимо от того меняете вы ссылки или нет. Поэтому делайте 2 версии сайта с аяксом и без.

answered Jan 26 '12 at 14:26

rusak

21

несогласен, и ответ неправильный. – Artem Jan 26 '12 at 18:19
Насчет безопасности не понял, какие тут могут быть проблемы? Про ЧПУ знаю, поэтому и хочу windows/plans, а не actualthread.aspx?bid=61&tid=812988, ну крайний вариант с #. Про индексацию знаю, но мне важно удобство пользователя. – komka Jan 26 '12 at 20:06
Фишинг, если JavaScript мог бы полностью менять адресную строку тогда можно было бы спокойно выдать один за другой со всем что вытекает. Поэтому браузеры запрещают это, ровно как и просмотр, куков для чюжого домена. – rusak Jan 27 '12 at 03:46
Как я уже выяснил, в адресной строке можно поменять все, кроме домена. Пример, в консоли набрать window.history.replaceState(null, null, '/hello-changed-world') – komka Jan 27 '12 at 07:48
Хорошо, возможно я немного не уследил за современными технологиями. Но во всех браузерах что хоть немного постарее такое свойство отсутствует и как раз таки из соображений безопастности.А пока так мало браузеров это потдерживает то придётся делать и так и так для разных браузеров. – rusak Jan 27 '12 at 09:33
Да, это все было добавлено как часть HTML5. Сейчас уже все последние поддерживают эту возможность кроме IE<10. А Вконтакте делает и так и так в зависимости от браузера. – komka Jan 27 '12 at 22:19

score 0 · Accepted Answer · edited Apr 12 '17 at 07:33

Пример того, что я хотел: html5demos.com/history и pjax.heroku.com. Но как выяснилось пока это не кроссбраузерно. Поддержку в браузерах можно увидеть тут: caniuse.com/#search=pushstate. Т.е. IE<10 в пролете.

@Shrek привел хорошую ссылку с этого же сайта, где написано, что за эти вещи отвечает window.history.replaceState. После этого все стало ясно.

@Shrek так же посоветовал посмотреть как это сделано Вконтакте. Сравнение строк в браузере Firefox и IE9 показало разницу. Примеры:

Т.е. они сделали через window.history.replaceState в браузерах, где есть эта поддержка и через window.location.hash в IE.

Как сделать переключение вкладок на странице с загрузкой по AJAX и изменением URL?

4 Answers4