Как я могу обнаружить изменение адресной строки с помощью JavaScript?
-
20-09-2019 - |
Вопрос
У меня есть тяжелое приложение Ajax, которое может иметь URL-адрес, например
http://example.com/myApp/#page=1
Когда пользователь манипулирует сайтом, адресная строка может измениться на что-то вроде
http://example.com/myApp/#page=5
без перезагрузки страницы.
Моя проблема заключается в следующей последовательности:
- Пользователь добавляет в закладки первый URL-адрес.
- Пользователь манипулирует приложением так, что второй URL-адрес указывает текущее состояние.
- Пользователь нажимает на закладку, созданную на шаге 1.
- URL-адрес в адресной строке изменится с http://example.com/myApp/#page=5 к http://example.com/myApp/#page=1, но я не знаю, как обнаружить произошедшие изменения.
Если я обнаружу изменение, на него будет воздействовать какой-то JavaScript.
Решение
HTML5 представляет хеш-смена событие, которое позволяет вам регистрироваться для получения уведомлений об изменениях хеша URL-адреса без опроса их с помощью таймера.
Он поддерживается всеми основными браузерами (Firefox 3.6, IE8, Chrome и другими браузерами на основе Webkit), но я все равно настоятельно рекомендую использовать библиотеку, которая обрабатывает это событие за вас, т.е.используя таймер в браузерах, не поддерживающих событие HTML5, и используя это событие в противном случае.
Дополнительную информацию о мероприятии см. https://developer.mozilla.org/en/dom/window.onhashchange и http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.
Другие советы
периодически проверяйте текущий адрес, используя setTimeout/interval:
var oldLocation = location.href;
setInterval(function() {
if(location.href != oldLocation) {
// do your action
oldLocation = location.href
}
}, 1000); // check every second
Вам следует расширить объект местоположения, чтобы предоставить событие, к которому вы можете привязаться.
то есть:
window.location.prototype.changed = function(e){};
(function() //create a scope so 'location' is not global
{
var location = window.location.href;
setInterval(function()
{
if(location != window.location.href)
{
location = window.location.href;
window.location.changed(location);
}
}, 1000);
})();
window.location.changed = function(e)
{
console.log(e);//outputs http://newhref.com
//this is fired when the window changes location
}
SWFадрес — отличная библиотека для подобных вещей.