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


Sayfayı yeniden yüklemeden geçerli sayfanın URL'sini değiştirebilmemin herhangi bir yolu var mı?

Bölümüne erişmek istiyorum önce Mümkünse # hash.

Sadece kısmı değiştirmem gerek sonra etki alanı, bu nedenle etki alanları arası politikaları ihlal ettiğimden değil.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

1810
2018-05-05 10:54


Menşei


Bunu Flash'ta yapabilirsiniz. Sadece biraz arka plan Uygulamasına ihtiyacınız olacak ve konum çubuğunu değiştirmek için JavaScript'inizi flaşa geçirmeniz yeterli. - Nick Berardi
Soruyu daha kolay anlayabilmek için, örneğin bir fotoğrafı açtığınızda Facebook'un yaptığı şey budur. URL çubuğu, bu fotoğrafa DOĞRUDAN olarak değişir, böylece sitenin neresinde olduğunuzu kaybetmeden URL'yi paylaşabilirsiniz. Son on yılda çerçeveye dayalı siteleri hatırlıyor musunuz? Sadece ana sayfa URL'sini alabilirsiniz, çünkü yalnızca iç çerçeveler değişiyordu. Ve bu korkunçtu. - Spidey


Cevaplar:


Bu artık Chrome, Safari, FF4 + ve IE10pp4 + 'da yapılabilir!

Daha fazla bilgi için bu sorunun cevabını görün: Yeni bir URL ile adres çubuğunu karma veya sayfayı yeniden yüklemeden güncelleme

Örnek:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Sonra kullanabilirsiniz window.onpopstate Geri / ileri düğmesi gezinmesini algılamak için:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Tarayıcı geçmişini işlemek için daha ayrıntılı bir bakış için bkz. bu MDN makalesi.


1633
2017-07-28 15:30



Facebook, IE7'de nasıl yapar? - Dominic Tobias
@CHiRiLo çıkış history.js HTML5 geçmiş API'sini desteklemeyen tarayıcılar için bir geri dönüş sağlar. - David Murdoch
@infensus URL’de bir yerde # işareti varsa, bu hile var yıl.. - Izkata
"IE10pp4 +" nın "pp4 +" kısmı ne anlama geliyor? - Scott David Tesler
platform önizleme 4 - David Murdoch


HTML5 tanıtıldı history.pushState() ve history.replaceState() sırasıyla, tarih girişleri eklemenize ve değiştirmenize izin veren yöntemler.

window.history.pushState('page2', 'Title', '/page2.php');

Bununla ilgili daha fazla bilgi edinin İşte


382
2017-08-17 13:59



Üzerinde çalışmayabilir file:/// güvenlik nedenleriyle, ör. Firefox 30. Test localhost ile python -m SimpleHTTPServer. - Ciro Santilli 新疆改造中心 六四事件 法轮功
Bunu codeigniter'de kullandım. - jned29
İlk parametrenin sadece bir dize değil, bir nesne olması bekleniyor. - Alexis Wilke
IMO bu gerçekten en iyi cevaptır. Tek yapmanız gereken mevcut URL'yi güncellemeniz ({}, null, strNewPath) yapmanız gereken tek şey. Önce (history.pushState) {} ile test etmek için en iyisi - Craig Jacobs
Bunları değiştirmek istemiyorsanız ilk 2 parametre için boş girebilirsiniz. Üçüncü parametre için mutlak bir url de kullanabilirsiniz. - Andrew


NOT: Eğer bir HTML5 Tarayıcı bu cevabı görmezden gelmelisiniz. Bu diğer cevaplarda görüldüğü gibi artık mümkün.

Değiştirmek için bir yolu yoktur URL sayfayı yeniden yüklemeden tarayıcıda. URL, son yüklenen sayfanın ne olduğunu gösterir. Eğer değiştirirseniz (document.location) sonra sayfayı yeniden yükleyecektir.

Bir bariz neden var, bir site yazıyorsunuz www.mysite.com banka giriş sayfasına benziyor. Ardından tarayıcı URL'sini değiştirmek için değiştirirsiniz www.mybank.com. Kullanıcı gerçekten baktıklarından habersiz olacak www.mysite.com.


96
2018-05-05 10:57



Etki alanını değiştirmek istemiyorum, sadece yol ve dosya adı. - Robinicks
Bu, tarayıcının alan / mysite ve domain / othersite'nin her ikisinin de kullanıcı tarafından “güvenli” kabul edildiği konusunda hiçbir fikri olmadığı için potansiyel güvenlik risklerini durdurmaz. Belki de soru niçin URL'yi değiştirmek istiyor? Kullanıcıdan gizlemek gerekirse, uygulamanızı sadece bir iframe içinde çalıştırabilirsiniz. - Robin Day
Bunu Flash ile yapabilirsiniz. URL'yi istekte bulunmadan değiştirebilmenizi sağlar. Bu, Flash tarayıcının dışında, ancak çok sıkı bir şekilde çalıştığı için mümkündür. - Nick Berardi
Adres çubuğunda istemci tarafındaki URL'yi değiştirmek istemek için mükemmel geçerli nedenler olduğunu söylemek zorundayım. Örneğin, sayfalama, sıralama ve filtreleme ile bir veri tablonuz varsa ve bu şeylerin Ajax destekli olmasını istiyorsanız, ancak yine de URL'yi güncelleyin, böylece sayfanın mevcut durumu yer işareti alabilir. Etki alanı adını (kimlik avı vb.) Değiştirerek güvenlik risklerini anlayabiliyorum, ancak neden tarayıcılar, URL'nin yalnızca üst düzey alanın sağ tarafında yer alan kodun değiştirilebilmesine izin vermiyor? - Sunday Ironfoot
Bu cevap artık% 100 doğru değil. Detaylar için cevabımı görün. - David Murdoch


HTML5'i de kullanabilirsiniz replaceState URL'yi değiştirmek istiyorsanız ancak girişi tarayıcı geçmişine eklemek istemiyorsanız:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Bu, geri düğmesi işlevselliğini 'bozar'. Bu, bir resim galerisi (örneğin, her bir görüntünün her bir görüntüsüne geri dönmek yerine geri ekran düğmesinin galeri dizin sayfasına geri dönmesini istediğiniz yere) ve her bir görüntünün kendi benzersiz URL'sini vermesi gibi bazı durumlarda gerekli olabilir.


93
2017-11-19 10:32





parent.location.hash = "hello";

73
2018-05-13 22:14



URL'yi değiştirmek istiyorum, sadece hash değil - #mydata - Robinicks
Karma değiştirme, ajax'da çerezler kullanmadan bir tür durum olduğundan, yer işareti verilebilir olduğundan ve tarayıcı geri düğmeleriyle uyumlu olduğundan yararlı olabilir. Gmail bunu günümüzde daha tarayıcı dostu yapmak için kullanıyor. - Matthew Lock
@Jarvis: Fark nedir? - noisy
@noisy Sunucu tarafında izleme, izleme hizmetine açıkça gönderilmediği sürece karmaları göremez. - RedYetiCo
örneğin omurga üzerinde karma yol açan bir mvc çerçeve kullanıyorsanız bu kullanışlı değildir. - catbadger


İşte benim çözümüm: (newUrl, geçerli olanı değiştirmek istediğiniz yeni URL'nizdir)

history.pushState({}, null, newUrl);

45
2018-06-10 18:25



Önce (history.pushState) {} 'i eski tarayıcıda olduğu gibi test etmek için en iyisi. - Craig Jacobs
Bu, Firefox'ta alacağınız daha fazla çalışmaz: Operasyon güvensizdir. - kkatusic


HTML5 replaceState, Vivart ve geo1701 tarafından daha önce belirtildiği gibi yanıttır. Ancak tüm tarayıcılarda / sürümlerde desteklenmez. History.js HTML5 durum özelliklerini sarar ve HTML4 tarayıcıları için ek destek sağlar.


25
2017-11-21 11:09