В современных браузерах и HTML5 в окне history
есть метод под названием pushState
. Это изменит URL-адрес и перенесет его в историю без загрузки страницы.
Вы можете использовать его следующим образом: он будет принимать 3 параметра: 1) объект состояния 2) название и URL-адрес):
window.history.pushState({page: "another"}, "another page", "example.html");
Это изменит URL-адрес, но не перезагрузит страницу, также не будет проверять, существует ли страница, поэтому, если вы используете какой-либо код javascript, который будет реагировать на URL-адрес, вы можете работать с ними следующим образом .
Также есть history.replaceState()
, который делает точно то же самое, за исключением того, что он изменит текущую историю вместо создания нового!
Также вы можете создать функцию для проверки если существует history.pushState, а затем продолжайте с остальными:
function goTo(page, title, url) {
if ("undefined" !== typeof history.pushState) {
history.pushState({page: page}, title, url);
} else {
window.location.assign(url);
}
}
goTo("another page", "example", 'example.html');
Также вы можете изменить #
для <HTML5 browsers
, который не перезагрузит страницу, вот как Angular
использовать SPA
в соответствии с hashtag ...
Изменить #
довольно легко, делая:
window.location.hash = "example";
, и вы можете обнаружить его следующим образом:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}