Adakah cara untuk mengubah bilah alamat browser tanpa menyegarkan halaman?

92

Saya sedang mengembangkan aplikasi web. Di dalamnya saya memiliki bagian yang disebut kategori yang setiap kali pengguna mengklik salah satu kategori, panel pembaruan memuat konten yang sesuai.

Setelah pengguna mengklik kategori yang saya ingin ubah dari url bilah alamat browser

www.mysite.com/products

menjadi sesuatu seperti 

www.mysite.com/products/{selectedCat}

tanpa menyegarkan halaman.
Apakah ada semacam API JavaScript yang dapat saya gunakan untuk mencapai ini?

url address-bar Luiso
sumber

Jawaban:

158

Dengan HTML5 Anda dapat mengubah url tanpa memuat ulang:

Jika Anda ingin membuat posting baru di riwayat browser (yaitu tombol kembali akan berfungsi)

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

Jika Anda hanya ingin mengubah url tanpa bisa kembali

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

Objek dapat digunakan untuk navigasi ajax:

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

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

Baca lebih lanjut di sini: http://www.w3.org/TR/html5-author/history.html

Solusi fallback: https://github.com/browserstate/history.js

Alfred
sumber
4
+1 Juga perhatikan; ini mengubah pathdan / atau query stringdi URL; mereka tidak dapat mengubah protokol, domain, atau port (karena itu akan menjadi masalah keamanan seperti yang ditunjukkan orang lain). The hashfungsi di atas dapat mengubah anchor (atau id fragmen)
Chris S
2
hanya mengatakan, dalam contoh Anda '/ item / 35'}, ada tambahan} yang ditambahkan
Zhanger
Sekadar pertanyaan sampingan, adakah cara untuk mengaktifkan URL ini untuk kemudian diindeks di Google?
Peter Featherstone
1
Perpustakaan yang lebih baik tampaknya adalah github.com/browserstate/history.js yang dipelihara secara aktif dan digunakan secara luas sedangkan fortes-history.js tidak digunakan selama 3 tahun.
Gonfi den Tschal
2
Harap dicatat bahwa firefox tidak mendukung judul, jadi gunakan document.title = "judul baru".
0fnt
31

Untuk menambah apa yang orang-orang sudah katakan edit properti window.location.hash agar sesuai dengan URL yang Anda inginkan di fungsi onclick Anda.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
roborourke
sumber
apakah ada cara untuk mengubah url tanpa simbol '#' di URL?
SHEKHAR SHETE
7

Saya yakin memanipulasi bilah alamat secara langsung ke url yang sama sekali berbeda tanpa pindah ke url itu tidak diperbolehkan untuk alasan keamanan, jika Anda senang dengan hal itu.

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

yaitu tautan gaya jangkar dalam halaman yang sama, lalu lihat berbagai skrip riwayat / "tombol kembali" yang sekarang ada di sebagian besar perpustakaan javascript.

Penyebutan panel pembaruan membuat saya menebak Anda menggunakan asp.net, dalam hal ini kontrol riwayat ajax asp.net adalah tempat yang baik untuk memulai

Justin Wignall
sumber
3

Menurut saya ini tidak mungkin (setidaknya mengubah ke alamat yang sama sekali berbeda), karena ini akan menjadi penyalahgunaan bilah alamat yang tidak disengaja, dan dapat mendorong serangan phishing.

Galwegian
sumber
Daripada bersikap tidak intuitif, menurut saya Anda seharusnya tidak dapat melakukannya karena dapat disalahgunakan untuk serangan phishing. Bagaimanapun, itu +1.
OregonGhost
Ya, itu baru saja terpikir oleh saya. Bukan ide yang bagus. Terima kasih OregonGhost.
Galwegian
1
Saya tidak berpikir mungkin ... Periksa keluar Wikimapia ... Seperti yang Anda tarik peta sekitar, URL akan berubah ...
Shivasubramanian A
@ Shivasubramanian-a: Saya melihat di Wikimapia, dan memang, mereka hanya menggunakan teknik yang disarankan oleh somej dan dijelaskan oleh sanchothefat: hanya mengubah nama jangkar. Yang aman dari phishing ...
PhiLho
-1

Ini tidak bisa dilakukan seperti yang Anda katakan. Metode yang disarankan oleh somej.net adalah yang terdekat yang bisa Anda dapatkan. Ini sebenarnya praktik yang sangat umum di era AJAX. Bahkan Gmail menggunakan ini.

aalaap
sumber
-1

"window.location.hash"

seperti yang disarankan oleh sanchothefat harus menjadi satu-satunya cara untuk melakukannya. Karena semua tempat yang saya telah melihat fitur ini, selalu setelah # di URL.


sumber