Как обнаружить изменения URL в SPA

Заметка

Решение должно быть в чистом Javascript - без внешней библиотеки и фреймворков.

В SPA все маршрутизируется с использованием механизма маршрутизации. Я просто хочу слушать даже всякий раз, когда какая-либо часть URL-адреса изменяется (не только хэш. Любое изменение, которое я хочу обнаружить)

Ниже приведен пример SPA,

https://www.google.in/
https://www.google.in/women 
https://www.google.in/girl 

Теперь всякий раз, когда URL меняется сhttps://www.hopscotch.in/ вhttps://www.hopscotch.in/womenЯ хочу запечатлеть это событие.

Я старался,

window.addEventListener("hashchange",function(event){
    console.log(this); // this gets fired only when hash changes
});
 Dipak Ingole07 июн. 2016 г., 12:26
@Rayon ... Я говорю не только об углах. Я хочу, чтобы это обрабатывалось в каждом СПА
 Rayon07 июн. 2016 г., 12:27
Мой плохой .. читаю какAngular ;( Мне жаль!

Ответы на вопрос(2)

setInterval Это довольно плохой способ проверить эти изменения: он никогда не приходит вовремя или слишком часто увольняется.

Что вы действительно должны сделать, это следить за событиями пользовательского ввода.Нажмите самый очевидный, но не забывайте оклавиатура вход. Если произойдет одно из этих событий, для изменения URL-адреса потребуется всего один тик. Итак, в быстром макете кода это:

let url = location.href;
document.body.addEventListener('click', ()=>{
    requestAnimationFrame(()=>{
      url!==location.href&&console.log('url changed');
      url = location.href;
    });
}, true);

(просто поместите его в консоль Github, чтобы увидеть, как он работает)

Вместе сpopstate Слушатель этого должно быть достаточно для большинства случаев использования.

Решение Вопроса

. Вы загружаете новый документ (хотя у вас естьload и так далее)

Если вы устанавливаете новый URL с помощью JavaScript (т. Е. СpushState) тогда нет события, но оно вам не нужно, потому что вы уже явно пишете код вокруг него, поэтому вы просто добавляете все, что вам нужно, в этот код.

Ты получишьa popstate событие если URL изменится назад, хотя ваша история pushState через кнопку назад браузера или подобное.

Следовательно, нет хорошего общего способа подключиться к каждому SPA. Самое близкое, что вы могли бы прийти, это использоватьsetInterval и проверить ценностьlocation.href чтобы увидеть, изменилось ли оно с момента последней проверки.

 Dipak Ingole07 июн. 2016 г., 12:52
Спасибо за быструю помощь. push и pop state не будут работать в моем случае. Придется больше копать, чтобы найти что еще можно сделать

Ваш ответ на вопрос