Sayfayı yenilemeden tarayıcının adres çubuğunu değiştirmenin bir yolu var mı?

92

Bir web uygulaması geliştiriyorum. İçinde, bir kullanıcı kategorilerden birini her tıkladığında bir güncelleme paneli uygun içeriği yükleyen kategoriler adlı bir bölümüm var.

Kullanıcı kategoriyi tıkladıktan sonra tarayıcının adres çubuğu url'sini değiştirmek istiyorum

www.mysite.com/products

gibi bir şeye

www.mysite.com/products/{selectedCat}

sayfayı yenilemeden.
Bunu başarmak için kullanabileceğim bir tür JavaScript API var mı?

url address-bar

— Luiso
kaynak

158

HTML5 ile url'yi yeniden yüklemeden değiştirebilirsiniz:

Tarayıcı geçmişinde yeni bir gönderi yapmak istiyorsanız (yani geri düğmesi çalışacaktır)

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

Geri dönmeden sadece url'yi değiştirmek istiyorsanız

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

Nesne, ajax navigasyonu için kullanılabilir:

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

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

Daha fazlasını buradan okuyun: http://www.w3.org/TR/html5-author/history.html

Bir yedek çözüm: https://github.com/browserstate/history.js

— Alfred
kaynak

4

+1 Ayrıca unutmayın; bunlar pathve / veya query stringURL’yi değiştirir; protokolü, etki alanını veya bağlantı noktasını değiştiremezler (diğerlerinin de belirttiği gibi bu bir güvenlik sorunu olabilir). Yukarıdaki hashişlev bağlantı (veya parça kimliğini) değiştirebilir

— Chris S

2

sadece örneğinize '/ item / 35'} diyorum, fazladan bir} eklendi

— Zhanger

Bir yan soru olarak, bu URL'lerin daha sonra Google'da dizine eklenmesini sağlamanın bir yolu var mı?

— Peter Featherstone

1

Daha iyi bir kütüphane github.com/browserstate/history.js gibi görünüyor , aktif olarak korunuyor ve yaygın olarak kullanılıyor, oysa fortes-history.js 3 yıldır boşta kaldı.

— Gonfi den Tschal

2

Lütfen firefox'un başlığı desteklemediğini unutmayın, bu yüzden document.title = "new title" kullanın.

— 0fnt

31

Adamların zaten söylediklerine eklemek için window.location.hash özelliğini onclick işlevinizde istediğiniz URL ile eşleşecek şekilde düzenleyin.

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

— Roborourke
kaynak

URL'de '#' simgesi olmadan url'yi değiştirmenin bir yolu var mı?

— SHEKHAR SHETE

7

Adres çubuğunu, o url'ye taşınmadan tamamen farklı bir url'ye doğrudan değiştirmenin, güvenlik nedenleriyle, eğer memnunsanız,

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

yani, aynı sayfa içinde bir bağlantı stili bağlantısı, ardından artık çoğu javascript kitaplığında mevcut olan çeşitli geçmiş / "geri düğmesi" komut dosyalarına bakın.

Güncelleme panelinden bahsetmek, asp.net kullandığınızı tahmin etmeme neden oluyor, bu durumda asp.net ajax geçmiş kontrolü başlamak için iyi bir yerdir

— Justin Wignall
kaynak

3

Bunun mümkün olduğunu sanmıyorum (en azından tamamen farklı bir adrese geçmek), çünkü bu, adres çubuğunun beklenmedik bir şekilde kötüye kullanılması ve kimlik avı saldırılarına neden olabilir.

— Galve dili
kaynak

Sezgisel olmaktan ziyade, bunu yapabilmeniz gerektiğini düşünüyorum çünkü kimlik avı saldırıları için kötüye kullanılabilir. Neyse, bu +1.

— OregonGhost

Evet, bu aklıma geldi. İyi bir fikir değil. OregonGhost'a teşekkürler.

— Galwegian

1

Ben do etrafında harita sürüklerken, URL değişti alır ... Wikimapia dışarı olası ... Kontrolü düşünüyorum ...

— Shivasubramanian A

@ Shivasubramanian-a: Wikimapia'ya baktım ve aslında sadece somej tarafından önerilen ve sanchothefat tarafından açıklanan tekniği kullanıyorlar: sadece çapa adını değiştirmek. Kimlik avına karşı güvenli olan ...

— PhiLho

-1

Bu senin söylediğin şekilde yapılamaz. Somej.net tarafından önerilen yöntem, alabileceğiniz en yakın yöntemdir. Aslında AJAX çağında çok yaygın bir uygulamadır. Gmail bile bunu kullanıyor.

— Aalaap
kaynak

-1

"window.location.hash"

sanchothefat'in önerdiği gibi, bunu yapmanın tek yolu olmalıdır. Çünkü bu özelliği gördüğüm tüm yerler, her zaman URL'deki # işaretinden sonra.