Adres çubuğunu karma olmadan yeni URL ile güncelleme veya sayfayı yeniden yükleme

643

Ya sayfa yeniden yüklemeden javascript (yol değil, etki alanı) yoluyla adres çubuğunu güncellemek için bir yol uygulamak krom (dev kanal) hakkında hayal ya da gerçekten bunu yaptım.

Ancak okuduğumu düşündüğüm makaleyi bulamıyorum .

Deli miyim yoksa bunu yapmanın bir yolu var mı (Chrome'da)?

ps window.location.hash, et al. Yukarıdakiler mevcutsa , bu sorunun cevabı yanlış olacaktır.

javascript ajax google-chrome

— David Murdoch
kaynak

3

Sayfayı yeniden yüklemeden URL'yi değiştirmenin

— Tobias Kienzler

1

@tobiaskienzler Bu soru ilk olarak 2009'da sorulduğunda, bu mümkün değildi.

— David Murdoch

3

Tabii ki değil. Ama şimdi, sorular aynı soruyu soruyor. Diğerinin eski bir cevabının kabul edilmiş olmasına rağmen bir utanç (sizin tarafınızdan fark ettim) ... Biliyor musunuz? Diğer tarafa dupe-close yapalım, kimse "orijinal" in daha eski olması gerektiğini söylemedi, aslında emsaller var

— Tobias Kienzler

@tobiaskienzler, diğer sorunun eski bir kabul edilmiş cevabı yok.

— David Murdoch

2

@TobiasKienzler 6 yaşında bir soru, neden bu soru ile uğraşmak zorundasın? Sadece şaşırtıcı cevabın tadını çıkarın ve uygulamanıza uygulayın. 6 yıl boyunca binlerce SO kullanıcı inanılmaz bir soru olduğunu kabul etti, lütfen olduğu gibi bırakın.

— İmam Assidiqqi

874

Artık bunu çoğu "modern" tarayıcıda yapabilirsiniz!

İşte okuduğum orijinal makale (10 Temmuz 2010'da yayınlanmıştır): HTML5: Sayfayı yenilemeden tarayıcı URL'sini değiştirme .

PushState / replaceState / popstate (HTML5 Geçmiş API'sı olarak da bilinir) konusuna daha ayrıntılı bir bakış için MDN belgelerine bakın .

TL; DR, bunu yapabilirsiniz:

window.history.pushState("object or string", "Title", "/new-url");

Temel bir nasıl yapılır? Sayfasını yeniden yüklemeden URL'yi değiştirme konusundaki cevabım bakın .

— David Murdoch
kaynak

3

Ah, işlevsellik WebKit'te ve birkaç ay önce indi < bugs.webkit.org/show_bug.cgi?id=36152 >. Güzel bulmak!

— oldestlivingboy

6

bu artık github tarafından kullanılırken, ağaçta gezinme

— Valerij

1

@Vprimachenko: Evet. Ve arada bir geri düğmemi kırıyorlar.

— David Murdoch

Bu artık Chrome, Safari, FF4 + ve IE10pp3 + 'da yapılabilir! (David Murdoch'un stackoverflow.com/questions/824349/…

— adresine verdiği yanıttan

11

Protip: Bu işlevlerle göreli yolları da kullanabilirsiniz (örneğin ../new-urlveya ../../new-urlen azından Chrome'da beklediğiniz şeyi yapıyor gibi görünüyorlar.)

— Mahn

156

Yalnızca karma sonrası olanları değiştirme - eski tarayıcılar

document.location.hash = 'lookAtMeNow';

Tam URL'yi değiştirme. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

Yukarıdakiler geçmişe yeni bir giriş ekleyecektir, böylece önceki duruma gitmek için Geri düğmesine basabilirsiniz. Geçmişe yeni bir giriş eklemeden yerinde URL'yi değiştirmek için

history.replaceState('data to be passed', 'Title of the page', '/test');

Bunları şimdi konsolda çalıştırmayı deneyin!

— Pawel
kaynak

13

replaceStatetam olarak ihtiyacım olan şeydi, orijinal yanıtı genişlettiğiniz için teşekkürler.

— Choylton B. Higginbottom

'alan adı ve protokol orijinalle aynı olmalı!' Bu, bazı balıkçı sitelerinin adres çubuğu URL'sini değiştirmesini önler.

— Rick

3

Bu işleve mutlak bir URL iletmemelisiniz. Bunu yaparsanız, büyük olasılıkla geçerli şema, ana bilgisayar ve bağlantı noktasından dinamik olarak oluşturmanız gerekir; bu, göreli bir URL ("foo.html" veya hatta "/foo.html yapabileceğiniz çok iştir). ") ve tarayıcının ilgilenmesine izin verin.

— DimeCadmium

1

@DimeCadmium güzel sadeleştirme. Güncellenmiş.

— Pawel

history.replaceStatetarihe ekle ff 66.0b1

— azzamsa

33

Pushstate'i desteklemeyen tarayıcıları bile algılamak için Davids yanıtında güncelleme:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

— metamagikum
kaynak

9

document.location.href sayfayı yeniden yükler

— paullb

1

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

— Kevin Mendez
kaynak

3

Bu kod snippet'i soruyu çözebilir, ancak bir açıklama dahil olmak , yayınınızın kalitesini artırmaya yardımcı olur. Gelecekte okuyucular için soruyu cevapladığınızı ve bu kişilerin kod önerinizin nedenlerini bilmeyebileceğini unutmayın.

— MaxiMouse

@MaxiMouse Şekeriniz için teşekkürler, aklıma alacağım.

— Kevin Mendez