Как реализовать переходы по сайту без перезагрузки страницы?

Question

[Alex Rave]

Имеется сайт на wordpress, на главной странице имеется контейнер в котором находиться плеер (воспроизводит стрим).
Задача заключается в том что, при переходах по ссылкам сайта, плеер не останавливался, по сути заменять содержимое конкретного контейнера div, при этом сохранять ссылки в адресной строке.
Пробовал поставить https://github.com/swup/swup сайте не захотел с ним работать.
Подскажите в какую сторону капнуть?

Answer 1

[ThunderCat]

pajax или SPA, что в принципе примерно одно и то же.

Answer 2

[Арсений Матыцин]

Если относится к WordPress сугубо как к в меру удобной системе управления данными и при этом морду сделать самому, предавшись буйству аки совокупляющийся носорог, то вполне может получится SPA на каком-нить фреймворке типа Vue, что позволит использовать все возможности фронтенда и в том числе менять урлы с переходами и не перезапускать плеер.

Копать стоит в таком случае в интернете с ключами «WordPress», «Vue\React\...», «REST». Кроме того, что я слепо уверен в таких реализациях, я еще и загуглил. Да, есть.

Answer 3

[Надим]

Просто используйте iframe, разверните его на все 100% высоты и ширины сайта, а далее пусть пользователь прозрачно в нём сёрфит. Плеер же запускайте вне фрейма и никаких проблем.

Comments

[Alex Rave]

Да, думал про этот вариант, но тогда как быть с изменением ссылки...

[Надим]

Alex Rave, ну так JavaScript-ом меняйте внешний адрес на какой хотите:
https://astrio.ru/blog/History-API

В качестве примера, откройте консоль браузера и введите там:

window.history.replaceState('', '', '/bla-bla-bla');

Увидите как это работает.

[Alex Rave]

Надим Закиров, круто, работает.
Но забыл учесть одну проблему.
Каждая страница имеет <?php get_header();?> и <?php get_footer(); ?>
Получается что когда пользователь нажмет на ссылку то во фрейме он увидит две шапки и два футера. Вот тут у меня ступор...

[Надим]

Alex Rave, не понял, с фига бы это? Если пользователь кликнет ссылку внутри фрейма, будет изменена только страница внутри фрейма. Или вы про то, что у вас может образоватся бесконечное количество вложенных фреймов? Если будете все делать в лоб, то да, будет у вас хрень, а не AJAX. Фрейм надо будет генерировать динамически, опираясь на window.top

Если не понимайте как все корректно настроить, могу за небольшую плату плагин вам накидать для AJAX загрузки. Мои контакты есть в профиле.