How to modify the URL without reloading the page?
Можно ли каким-либо образом изменить URL-адрес текущей страницы без перезагрузки страницы?
Я хотел бы получить доступ к части до # хэша, если это возможно.
Мне нужно только изменить часть после домена, поэтому я не нарушаю междоменных политик.
window.location.href = "www.mysite.com/page2.php"; // sadly this reloads
25 ответов
Теперь это можно сделать в Chrome, Safari, FF4+ и IE10pp4+!
См. Ответ на этот вопрос для получения дополнительной информации: Обновление адресной строки с новым URL без хэша или перезагрузка страницы
Пример:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
Вы можете использовать window.onpopstate чтобы обнаружить кнопку перемещения назад / вперед:
window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};
Более подробный взгляд на манипулирование историей браузера смотрите в этой статье MDN.
HTML5 представил history.pushState() а также history.replaceState() методы, которые позволяют добавлять и изменять записи истории, соответственно.
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-адрес.
Вот мое решение: (newUrl - ваш новый URL, который вы хотите заменить текущим)
history.pushState({}, null, newUrl);
ПРИМЕЧАНИЕ. Если вы работаете с HTML5 браузер, то вы должны игнорировать этот ответ. Теперь это возможно, как видно из других ответов.
Там нет никакого способа изменить URL в браузере без перезагрузки страницы. URL-адрес представляет собой последнюю загруженную страницу. Если вы измените его (document.location) Затем он перезагрузит страницу.
Одна очевидная причина в том, что вы пишете сайт на www.mysite.com это похоже на страницу входа в банк. Затем вы измените строку браузера, чтобы сказать www.mybank.com, Пользователь будет совершенно не осознавать, что он действительно смотрит на www.mysite.com,
В современных браузерах и HTML5 есть метод, называемый pushState на окне history, Это изменит 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 в соответствии с хэштегом...
изменения # это довольно просто, делать так:
window.location.hash = "example";
и вы можете обнаружить это так:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
HTML5 replaceState - это ответ, как уже упоминалось Vivart и geo1701. Однако это поддерживается не во всех браузерах / версиях. History.js охватывает функции состояния HTML5 и обеспечивает дополнительную поддержку браузеров HTML4.
До HTML5 мы можем использовать:
parent.location.hash = "hello";
а также:
window.location.replace("http:www.example.com");
Этот метод перезагрузит вашу страницу, но HTML5 представил history.pushState(page, caption, replace_url) это не должно перезагрузить вашу страницу.
Если вы пытаетесь разрешить пользователям делать закладки на страницы и делиться ими, и вам не нужен именно правильный URL-адрес, и вы не используете хеш-привязки для чего-либо еще, то вы можете сделать это за два части; Вы используете расположение.hash, рассмотренное выше, а затем реализуете проверку на домашней странице, чтобы найти URL с привязкой к хешу и перенаправить вас к последующему результату.
Например:
1) Пользователь включен www.site.com/section/page/4
2) Пользователь выполняет действие, которое изменяет URL-адрес на www.site.com/#/section/page/6 (с хешем). Допустим, вы загрузили на страницу правильный контент для страницы 6, поэтому, кроме хеша, пользователь не слишком обеспокоен.
3) Пользователь передает этот URL кому-то другому или добавляет в закладки
4) Кто-то еще или тот же пользователь позднее www.site.com/#/section/page/6
5) Код на www.site.com/ перенаправляет пользователя на www.site.com/section/page/6используя что-то вроде этого:
if (window.location.hash.length > 0){
window.location = window.location.hash.substring(1);
}
Надеюсь, что это имеет смысл! Это полезный подход для некоторых ситуаций.
Вы можете использовать эту красивую и простую функцию в любом месте вашего приложения.
function changeurl(url, title) {
var new_url = '/' + url;
window.history.pushState('data', 'Title', new_url);
document.title = title;
}
Вы можете не только редактировать URL, но и обновлять заголовок вместе с ним.
Очень полезно всем.
Ниже приведена функция для изменения 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);
Как отметил Томас Стьернегард из Jeppesen, вы можете использовать History.js для изменения параметров URL, пока пользователь перемещается по ссылкам и приложениям Ajax.
С тех пор прошел почти год, и History.js вырос и стал более стабильным и кросс-браузерным. Теперь его можно использовать для управления историческими состояниями как в HTML5-совместимых, так и во многих браузерах только для HTML4. В этой демонстрации вы можете увидеть пример того, как он работает (а также попробовать его функциональные возможности и ограничения).
Если вам понадобится помощь в использовании и реализации этой библиотеки, я предлагаю вам взглянуть на исходный код демонстрационной страницы: вы увидите, что это очень легко сделать.
Наконец, для всестороннего объяснения того, что может быть проблемами с использованием хешей (и hashbangs), проверьте эту ссылку Бенджамином Луптоном.
Ваш новый URL.
let newUrlIS = window.location.origin + '/user/profile/management';
В некотором смысле вызов pushState() аналогичен установке window.location = "#foo" в том смысле, что оба они также создают и активируют другую запись истории, связанную с текущим документом. Но у pushState() есть несколько преимуществ:
history.pushState({}, null, newUrlIS);
Использование history.pushState() из HTML 5 History API
см. ссылку для более подробной информации HTML5 History API
Это возможно без использования хешей, взгляните на специальный плагин jQuery Address:
Пример тут.
Обратите внимание, что он будет использовать хеши в IE, для этого нет обходного пути.
Эти две строки — все, что вам нужно.
var new_url="Your modified URL";
window.history.pushState(null,"",new_url);
Этот код у меня работает. Я использовал его в своем приложении на ajax.
Как только страница загружается в идентификатор с использованием ajax, он автоматически меняет URL-адрес браузера без перезагрузки страницы.
Это функция ajax ниже.
function showData(){
$.ajax({
type: "POST",
url: "Bank.php",
data: {},
success: function(html){
$("#viewpage").html(html).show();
$("#viewpage").css("margin-left","0px");
}
});
}
Пример: с любой страницы или контроллера, например «Dashboard», когда я нажимаю на банк, он загружает список банков с использованием кода ajax без перезагрузки страницы. В настоящее время URL-адрес браузера не будет изменен.
history.pushState({ foo: 'bar' }, '', '/bank');
Но когда я использую этот код в ajax, он меняет URL-адрес браузера без перезагрузки страницы. Это полный код ajax ниже.
function showData(){
$.ajax({
type: "POST",
url: "Bank.php",
data: {},
success: function(html){
$("#viewpage").html(html).show();
$("#viewpage").css("margin-left","0px");
history.pushState({ foo: 'bar' }, '', '/bank');
}
});
}
это все, что вам нужно для навигации без перезагрузки
# add setting without reload
parent.location.hash = "setting";
// if url change with hash do somthing
window.addEventListener('hashchange', () => {
console.log('url hash changed!');
})
// if url change do somthing (dont detect changes with hash)
//window.addEventListener('locationchange', function(){
// console.log('url changed!');
//})
// remove #setting without reload
history.back(); let stateObject = { foo: "bar" };
history.pushState(stateObject, "page 2", "newpage.html");
Вы можете увидеть здесь Обновление URL браузера без перезагрузки страницы
Просто используйте, он не перезагрузит страницу, а только URL:
$('#form_name').attr('action', '/shop/index.htm').submit();
Использование window.history.pushState("object or string", "Title", "/new-url"), но он все еще отправляет новый URL-запрос на сервер
Предполагая, что вы не пытаетесь сделать что-то вредоносное, все, что вы хотели бы сделать со своими собственными URL-адресами, может быть волшебным образом реализовано с помощью htaccess.