Як нам оновити URL-адреси або рядки запитів за допомогою javascript / jQuery без перезавантаження сторінки?

Чи є спосіб програмно оновити URL-адресу без перезавантаження сторінки?

EDIT: Я додав щось у заголовок у дописі. Я просто хочу пояснити, що не хочу перезавантажувати сторінку

Так - document.location = "http://my.new.url.com"

Ви також можете отримати його таким же способом, наприклад.

var myURL = document.location;
document.location = myURL + "?a=parameter";

Об'єкт розташування також має ряд корисних властивостей:

hash            Returns the anchor portion of a URL
host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

РЕДАГУВАТИ: Встановлення хешу документа. Location не повинно перезавантажувати сторінку, просто змініть, де на сторінці фокус. Тож оновлення до #myIdперейде до елемента за допомогою id="myId". Якщо idцього не існує, я вірю, що нічого не станеться? (Хоча потрібно підтвердити в різних браузерах)

EDIT2: Щоб це було зрозуміло, не лише в коментарі: Ви не можете оновити всю URL-адресу за допомогою JavaScript без зміни сторінки, це обмеження безпеки. В іншому випадку ви можете натиснути на посилання на випадкову сторінку, створену, щоб виглядати як gmail, і миттєво змінити URL-адресу на www.gmail.com і вкрасти дані для входу людей.
Ви можете змінити частину після домену в деяких браузерах, щоб справлятися зі стилями AJAX, але це вже пов’язано з Osiris. Більше того, ви, мабуть, не повинні цього робити, навіть якби могли. URL-адреса повідомляє користувачеві, де він перебуває на вашому сайті. Якщо ви зміните його, не змінюючи вміст сторінки, це стає трохи заплутаним.

Так і ні. Усі поширені веб-браузери мають запобіжний захід. Мета полягає в тому, щоб не дати людям створювати копії веб-сайтів, змінити URL-адресу, щоб вона виглядала правильно, а потім мати можливість обдурити людей та отримати їх інформацію.

Однак деякі веб-браузери, сумісні з HTML5, впровадили API історії, який можна використовувати для чогось подібного до того, що ви хочете:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

Я тестував, і це спрацювало нормально. Це не перезавантажує сторінку, але лише дозволяє змінити запит URL-адреси. Ви не зможете змінити протокол або значення хоста.

Для отримання додаткової інформації:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Ви можете використовувати:

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)

Використовуйте

window.history.replaceState ({}, document.title, updatedUri);

Щоб оновити URL-адресу без перезавантаження сторінки

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

Щоб видалити рядок запиту без перезавантаження сторінки

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}

Так

document.location - це звичайний спосіб.

Однак document.location фактично такий самий, як window.location, за винятком window.location трохи більше підтримується у старих браузерах, тому може бути кращим вибором.

Перегляньте цю тему на SO для отримання додаткової інформації:

Яка різниця між window.location та document.location в JavaScript?

Визначте новий об’єкт URL-адреси, призначте йому поточну URL-адресу, додайте параметри до цього об’єкта URL-адреси та, нарешті, переведіть його у стан вашого браузера.

var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);

Префікс URL-адреси змінюється хештегом, щоб уникнути перенаправлення.

Це переспрямовує

location.href += '&test='true';

Це не переспрямовує

location.href += '#&test='true';

Звичайний javascript: document.location = 'http://www.google.com';

Однак це призведе до оновлення браузера - розгляньте можливість використання хешів, якщо вам потрібно оновити URL-адресу, щоб реалізувати якусь історію перегляду без перезавантаження сторінки. Можливо, ви захочете заглянути в jQuery.hashchange, якщо це так.

Вам потрібно буде бути більш конкретним. Що ви маєте на увазі під словом «оновити URL-адресу»? Це може означати автоматичний перехід на іншу сторінку, що, безумовно, можливо.

Якщо ви хочете просто оновити вміст адресного рядка без перезавантаження сторінки, див. Змінення URL-адреси без перезавантаження сторінки

Так - document.location.hashдля запитів