Запишемо загальний формат URL, використовуючи позначення властивостей об'єкту location:
protocol://hostname:port/pathname?search#hash
Кожна з властивостей об'єкту location є рядком для зчитування/запису, яка містить одну або кілька складових URL. Зміна значення властивостей об'єкту location призводить до зчитування нового URL браузером
Перелічимо властивості об'єкту location:
protocol - властивість, яка відповідає протоколу, який використовує браузер, вона повертає : http://, https:// ftp://, file:, mailto: и т.д.hostname - властивість, яка містить ім'я хосту
port - властивість, що представляє номер порту
pathname - властивість, що повертає шлях до ресурсу
search - властивість, яка представляє рядок пошуку, що містить мітку ?
hash - складова URL, яка містить мітку закладки #, це властивість, яка повертає ім'я якоря в HTML - файлі
Крім того:
host - властивість, яка повертає значення hostname, після якого через двокрапку вказано номер порту (port)
href - властивість, яка відповідає повному URL
window.location.href:
window.location.host:
window.location.hostname:
window.location.pathname:
hash ► #_ , обрізаємо мітку ► ___
Запис hash в адресний рядок:
$("#btn1").click(function() {
window.location.hash = 111;
});
Прибрати # (з перезавантаженням):
$("#btnP").click(function() {
window.location= window.location.pathname;
});Зчитування hash:
$("#btn2").click(function() {
var wlh=window.location.hash;
$('#info1').text(wlh);
// обрізати після нульового знаку
var h=window.location.hash.slice(1);
$('#info2').text(h);
});
history
Подія, яку викликають кнопку "вперед" та "назад" браузера
onpopstate = function(event) {
// код обробки події
}
history.go(1) - перейдемо на крок вперед (якщо він існує)
history.go(-2) - перейдемо на 2 кроки назад (якщо є така можливість)
history.length - кількість кроків в історії
Запишемо в історію кілька значень hash з інтервалом в дві секунду - 11, 22, 33 (це можна спостерігатии в адресному рядку) та нижче (виводиться функцією onpopstate - записи в адресний рядок викликають обробник onpopstate)
onpopstate = function(event) {
$('#infoB').text(window.location.hash);
}За допомогою кнопки "назад" та "вперед" браузера переглянемо історію та запустимо функцію для обробки цих подій
_______Код запису в історію трьох значень:
$("#btnHis").click(function() {
setTimeout(function(){window.location.hash = 11,
setTimeout(function(){window.location.hash = 12;
setTimeout(function(){window.location.hash = 13 },2000); },2000); },1000);
});
далі ✏