7

Здравствуете. Наткнулся в инсте на изменение URL, но перезагрузка страницы не происходит. Если скопировать URL в другое окно но инфа тоже загружается.

Полагаю это как то так происходит: при клике по ссылке, отменяю действие по умолчанию копирую ее href в location.hash, а инфу подгружаю ajax'ом, а если браузер пользователя не поддерживает location.hash, то просто не отменяю действие по умолчанию при клике на ссылке, и человек по ней переходит.

Это предположение имеет место быть? или есть более лаконичные варианты?

6
  • window.history.pushState({}, 'title', '/some') ввидите в консоле. Читайте о html5 history
    – user220409
    21 янв 2017 в 11:11
  • @OlmerDale И если браузер это не поддерживает по получается просто переходим по ссылке? 21 янв 2017 в 11:14
  • Этого я не знаю, я не работаю с такими браузерами.
    – user220409
    21 янв 2017 в 11:15
  • 3
    Они меняют адрес функцией, которую указал OlmerDale. Ну а всё остальное да, как вы написали
    – Yuri
    21 янв 2017 в 11:17
  • @JarryRoxwell , если браузер не поддерживает манипуляции с history, то он выкинет js-ошибку.
    – br3t
    22 янв 2017 в 7:00

1 ответ 1

3
<div class="link-group">
    <a class="route" href="/orange">orange</a>
    <a class="route" href="/tomato">tomato</a>
</div>
<script>
    document.body.querySelectorAll('.route')
        .forEach( link => link.addEventListener('click', link_clickHandler) );

    function link_clickHandler( event ){
        event.preventDefault();

        let path = event.target.href;

        window.history.pushState({route: path}, "some title", path);
    }

    window.addEventListener('popstate', window_popStateHandler);

    function window_popStateHandler( event ){
        if(event.state){
            console.log(event.state)
        }

        console.log(event);
    }
</script>

Вот минимальный код который требуется для создания клиентского роутера. К сожаления в родной для SO песочнице он не будет работать, да и в браузере если подгружать из локального фала, наверное тоже, но с сервером это работает.

Что в коде происходит -

  1. все ссылки приводящие к изменению url помечаются классом route или любым другим способом.
  2. при загрузке js первым делом нужно выбрать все ссылки и подписать их на событие click.
  3. в обработчике события click вызываем event.preventDefault() чтобы предотвратить поведение по умолчанию, а именно срабатывание ссылки которое приведет к перезагрузки страницы.
  4. с помощью History api помещаем данные о текущем пути и указываем тот самый url который бы мы хотели увидеть в строке состояния. (1)
  5. грузим при помощи ajax данные и отображаем их.
  6. стоит понимать что url хоть и выглядят красиво-как настоящие, то есть без # шеш решетки, на самом деле таковыми не являются. Если Вы зайдя на страницу http://localhost:8080 измените адрес на http://localhost:8080/orange, то все корректно отработает. Но зайдя сразу на адрес http://localhost:8080/orange Вы получите ошибку 404, так как в реальности такого адреса не существует. Для этого нужно чтобы сервер на абсолютно любой запрос всегда отдавал страницу index.html. Тогда зайдя на адрес http://localhost:8080/orange браузер код клиентского роутера, который в свою очередь распознает url и продолжит работу в штатном режиме, собирая и загружая данные по заданным правилам. Стоит так же понимать что именно клиентский роутер должен показывать страницу 404, так как только он знает какие пити существуют, а какие нет.
  7. ну и стоит добавить что в изоморфном приложение происходит почти все тоже самое за исключением того что при заходе клиентская часть роутера отрабатывает на сервере и в index.html помещается уже отрендеренная разметка.
1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.