Есть ли способ изменить URL текущей страницы без перезагрузки страницы?
Я хотел бы получить доступ к части до хэша #, если это возможно.
Мне нужно изменить только часть после домена, так что я не нарушаю кросс-доменную политику.
window.location.href = "www.mysite.com/page2.php"; // Sadly this reloads
Теперь это можно сделать в Хром, сафари, Firefox 4+, и интернет&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;10pp4+!
Посмотрим на этот вопрос'ы ответить для получения дополнительной информации: https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page
Пример:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
Затем вы можете использовать окно`.onpopstate обнаруживать назад/вперед кнопки навигации:
window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};
Для более глубокий взгляд на манипулирование историю браузера, видеть эту MDN article.
В HTML5 ввели history в [.pushState()
](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method) и history[.replaceState()
](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method) методы, которые позволяют добавлять и изменять записи истории, соответственно.
window.history.pushState('page2', 'Title', '/page2.php');
Подробнее об этом здесь
Вы также можете использовать HTML5 replaceState если вы хотите изменить URL-адрес, но Дон'т хотите, чтобы добавить запись в историю браузера:
if (window.history.replaceState) {
//prevents browser from storing history with each change:
window.history.replaceState(statedata, title, url);
}
Это 'перерыв' кнопку Назад функциональность. Это может потребоваться в некоторых случаях, таких как галерея изображений (где вы хотите кнопку назад, чтобы вернуться на главную страницу галереи, а возвращаешься через каждого изображения, которые вы просматривали) в то время давая каждому изображению свой уникальный адрес URL.
ПРИМЕЧАНИЕ: Если вы работаете с браузером HTML5, то вам следует проигнорировать этот ответ. Теперь это возможно, как видно из других ответов.
Не существует способа изменить URL в браузере без перезагрузки страницы. URL представляет собой последнюю загруженную страницу. Если вы измените его (document.location
), то это приведет к перезагрузке страницы.
Одна из очевидных причин: вы пишете сайт на www.mysite.com
, который выглядит как страница входа в банк. Затем вы меняете строку URL браузера на www.mybank.com
. Пользователь будет совершенно не в курсе, что на самом деле он смотрит на www.mysite.com
.
Вот мое решение (newUrl ваш новый URL-адрес, который вы хотите заменить текущий):
history.pushState({}, null, newUrl);
parent.location.hash = "hello";
В HTML5 replaceState ответ, как уже было упомянуто Vivart и geo1701. Однако он не поддерживается всеми браузерами и версиями. History.js обертывания для HTML5 государственных функций и обеспечивает дополнительную поддержку HTML4 браузерах.
В современной браузеры и HTML5, есть метод, называемый `pushState по истории окно``. Что будет изменить URL-адрес и нажмите его в историю без загрузки страницы.
Вы можете использовать его как этот, он будет принимать 3 параметра, 1) состояния объекта 2) название и URL):
window.history.pushState({page: "another"}, "another page", "example.html");
Это будет изменить URL-адрес, но не перезагрузите страницу. Кроме того, он не'т проверить, если существуют страницы, так что если вы сделать некоторые JavaScript-код, который будет реагировать на URL-адрес, вы можете работать с ними такой.
Также есть история.replaceState ()`, который делает точно то же самое, за исключением, он будет изменять текущую историю, а не создавать новую!
Также вы можете создать функцию, чтобы проверить, если истории.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, который выиграл'т перезагрузите страницу. По данным хэштегом, что's пути Angular использует, чтобы сделать спа...
Изменение #
это довольно легко, делаем так:
window.location.hash = "example";
И вы можете обнаружить его такой:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
До того, как HTML5 мы можем использовать:
parent.location.hash = "hello";
и:
window.location.replace("http:www.example.com");
Этот метод позволит обновить ваши страницы, но и HTML5 представил историю.pushState(страницы, заголовок, replace_url), которые не должны перезагрузить вашу страницу.
Если то, что вы'вновь пытается сделать, это разрешить пользователям в закладки/поделиться страниц, и вы не'т это нужно, чтобы быть точно правильный URL-адрес, и вы'повторно не используя хэш-анкеры для чего-либо еще, то вы можете сделать это в двух частях; используется расположение.хэш описано выше, а затем реализовать проверку на главную страницу, искать URL с хэш-якорь в нем, и перенаправит вас на последующий результат.
Например:
пользователь www.site.com/section/page/4
пользователь выполняет некоторое действие, которое изменяет URL-адрес www.site.com/#/section/page/6
(хэш). Скажем, вы'вэ загружен правильный контент на странице 6 на странице, так что только хэш-пользователь не слишком беспокоили.
пользователь передает этот URL на кого-то другого, или закладки его
Кто-то другой, или же пользователей на более позднюю дату, попадают в www.site.com/#/section/page/6`
Код на www.site.com/ перенаправляет пользователя www.site.com/section/page/6`, используя что-то вроде этого:
if (window.location.hash.length > 0){
window.location = window.location.hash.substring(1);
}
Надеюсь, что имеет смысл! Это'с полезным подходом в некоторых ситуациях.
Ниже приведена функция, чтобы изменить URL-адрес без перезагрузки страницы. Это поддерживается только для HTML5.
function ChangeUrl(page, url) {
if (typeof (history.pushState) != "undefined") {
var obj = {Page: page, Url: url};
history.pushState(obj, obj.Page, obj.Url);
} else {
window.location.href = "homePage";
// alert("Browser does not support HTML5.");
}
}
ChangeUrl('Page1', 'homePage');
Любое изменение локции (либо window.location
, либо document.location
) вызовет запрос на этот новый URL, если вы не просто изменяете фрагмент URL. Если вы меняете URL, вы меняете URL.
Используйте серверные методы перезаписи URL, такие как mod_rewrite от Apache, если вам не нравятся URL, которые вы сейчас используете.
Вы можете добавить якорь теги. Я использую это на моем http://www.piano-chords.net сайте/ так что я могу отслеживать с помощью Google Analytics и какие люди заходят на страницу.
Я просто добавить тег привязки, а затем части страницы я хочу, чтобы отслеживать:
var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
Как указывает Томас Stjernegaard Джеппесен, вы могли бы использовать History.js для изменения параметров URL при переходе пользователя через AJAX-ссылок и приложений.
Почти год прошел с тех пор, что ответить, и History.js вырос и стал более стабильным и кросс-браузер. Теперь он может быть использован для управления государств история в HTML5-совместимые, а также во многих HTML4-только браузеры. В этой демо Вы можете увидеть пример, как это работает (так же как возможность попробовать свои возможности и ограничения.
Если вам нужна помощь в том, чтобы использовать и применять эту библиотеку, я предлагаю вам взглянуть на исходный код демо-страницы: вы увидите, что она's очень легко сделать.
Наконец, для всестороннего объяснения того, что могут быть вопросы об использовании хэшей (и hashbangs), проверьте по этой ссылке Бенджамин Лаптон.
Используйте истории.pushState()` из HTML 5 API для истории.
Обратитесь к HTML5 история с API для более подробной информации.
Использование:
let stateObject = { foo: "bar" };
history.pushState(stateObject, "page 2", "newpage.html");
Вы можете видеть это в блоге обновить URL-адрес в браузере без перезагрузки страницы.
Использовать окно`.история.pushState("в объект или строку с", то "Титул" и " Ну/новый URL-адрес и"), но все равно отправят новый запрос на URL-адрес сервера.
Если вы не пытаетесь сделать что-то вредоносное, все, что вы хотите сделать со своими URL-адресами, можно сделать с помощью htaccess.