Чи є спосіб змінити адресний рядок браузера без оновлення сторінки?

91

Я розробляю веб-програму. У ньому у мене є розділ, який називається категоріями, і кожен раз, коли користувач натискає одну з категорій, панель оновлення завантажує відповідний вміст.

Після того, як користувач натиснув категорію, я хочу змінити URL-адресу адресного рядка браузера

www.mysite.com/products

до чогось подібного

www.mysite.com/products/{selectedCat}

без оновлення сторінки.
Чи є якийсь API JavaScript, який я можу використовувати для цього?

url address-bar

— Луїсо
джерело

157

За допомогою HTML5 ви можете змінювати URL-адресу без перезавантаження:

Якщо ви хочете зробити новий допис в історії браузера (тобто кнопка "Назад" буде працювати)

window.history.pushState('Object', 'Title', '/new-url');

Якщо ви просто хочете змінити URL-адресу, не маючи можливості повернутися назад

window.history.replaceState('Object', 'Title', '/another-new-url');

Об'єкт можна використовувати для навігації Ajax:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Детальніше читайте тут: http://www.w3.org/TR/html5-author/history.html

Резервне рішення: https://github.com/browserstate/history.js

— Альфред
джерело

4

+1 Також примітка; вони змінюють pathта / або query stringв URL; вони не можуть змінити протокол, домен або порт (оскільки це може бути проблемою безпеки, як вказували інші). Наведена hashвище функція може змінити якір (або фрагмент ідентифікатора)

— Chris S

2

просто кажучи, у вашому прикладі '/ item / 35'} додано додатковий} додано

— Zhanger

Так само як побічне запитання, чи є спосіб забезпечити індексацію цих URL-адрес у Google?

— Пітер Фезерстоун

1

Здається, кращою бібліотекою є github.com/browserstate/history.js, яка активно підтримується та широко використовується, тоді як fortes-history.js простоював 3 роки.

— Gonfi den Tschal

2

Зверніть увагу, що firefox не підтримує заголовок, тому використовуйте document.title = "новий заголовок".

— 0fnt

31

Щоб додати до того, що вже сказали хлопці, відредагуйте властивість window.location.hash, щоб відповідати URL-адресі, яку ви хочете у вашій функції onclick.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

— робороурка
джерело

чи є спосіб змінити URL-адресу без символу "#" в URL-адресі?

— ШЕХАР ШЕТ

7

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

www.mysite.com/products/#{selectedCat}

тобто посилання на стилі якоря на одній сторінці, а потім перегляньте різні сценарії історії / "кнопки повернення", які зараз присутні в більшості бібліотек javascript.

Згадка про панель оновлення змушує мене здогадуватися, що ви використовуєте asp.net, у такому випадку елемент керування історією ajax asp.net - гарне місце

— Джастін Віньялл
джерело

3

Я не думаю, що це можливо (принаймні, перейти на зовсім іншу адресу), оскільки це було б неінтуїтивним неправильним використанням адресного рядка та могло б сприяти фішинговим атакам.

— Галвезька
джерело

Замість того, щоб бути неінтуїтивним, я думаю, що у вас цього не повинно бути, оскільки це може бути зловжито для фішингових атак. У всякому разі, це +1.

— OregonGhost

Так, це мені просто спало на думку. Не гарна ідея. Дякую OregonGhost.

— Галлезька

1

Я дійсно думаю , що його можливе ... перевірити Вікімапія ... Як ви перетягніть карту навколо, URL отримує змінилося ...

— Shivasubramanian

@ Shivasubramanian-a: Я подивився Вікімапію, і справді, вони просто використовують техніку, запропоновану somej та описану sanchothefat: просто зміна назви якоря. Що безпечно від фішингу ...

— PhiLho

-1

Це не можна робити так, як ви говорите. Метод, запропонований somej.net, є найближчим з усіх можливих. Це насправді дуже поширена практика в епоху AJAX. Навіть Gmail використовує це.

— аалаап
джерело

-1

"window.location.hash"

як припускає sanchothefat, це має бути єдиним способом зробити це. Оскільки всі місця, де я бачив цю функцію, це весь час після URL-адреси # у.