Sayfayı yeniden yüklemeden URL'yi nasıl değiştiririm?

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

Mümkünse # karma öncesi bölüme erişmek istiyorum.

Yalnızca alan adından sonra bölümü değiştirmem gerekiyor , bu yüzden alanlar arası politikaları ihlal ettiğim gibi değil.

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

Bu artık Chrome, Safari, Firefox 4+ ve Internet Explorer 10pp4 + 'da yapılabilir!

Daha fazla bilgi için bu sorunun cevabına bakın: Adres çubuğunu karma olmadan yeni URL ile güncelleme veya sayfayı yeniden yükleme

Misal:

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

Daha sonra window.onpopstategeri / ileri düğmesi gezinmesini algılamak için kullanabilirsiniz :

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

Tarayıcı geçmişini değiştirmeye daha ayrıntılı bir bakış için bu MDN makalesine bakın .

HTML5 , sırasıyla geçmiş girişlerini eklemenize ve değiştirmenize izin veren history.pushState()ve history.replaceState()yöntemlerini tanıttı .

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

Bununla ilgili daha fazla bilgiyi buradan okuyun

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

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

Bu, geri düğmesi işlevini 'bozacaktır'. Bu, her resme kendi benzersiz URL'sini verirken, bir resim galerisi (geri düğmesinin görüntülediğiniz her görüntüde geriye gitmek yerine galeri dizin sayfasına geri dönmesini istediğiniz) gibi bazı durumlarda gerekli olabilir.

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

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

NOT: Bir HTML5 tarayıcısıyla çalışıyorsanız, bu yanıtı yok saymalısınız. Bu şimdi diğer cevaplarda da görüldüğü gibi mümkün.

Sayfayı yeniden yüklemeden tarayıcıdaki URL'yi değiştirmenin bir yolu yoktur . URL, son yüklenen sayfanın ne olduğunu gösterir. Değiştirirseniz ( document.location) sayfa yeniden yüklenir.

Bunun açık bir nedeni, www.mysite.combir banka giriş sayfasına benzeyen bir site yazmanızdır . Sonra tarayıcı URL çubuğunu söyleyecek şekilde değiştirin www.mybank.com. Kullanıcı gerçekten baktığından tamamen habersiz olacaktır www.mysite.com.

parent.location.hash = "hello";

Modern tarayıcılarda ve HTML5'te , pushStatepencerede adı verilen bir yöntem vardır history. Bu, URL'yi değiştirir ve sayfayı yüklemeden geçmişe iter.

Bu şekilde kullanabilirsiniz, 3 parametre, 1) durum nesnesi 2) başlık ve bir URL) alacaktır:

window.history.pushState({page: "another"}, "another page", "example.html");

Bu URL'yi değiştirir, ancak sayfayı yeniden yüklemez. Ayrıca, sayfanın var olup olmadığını kontrol etmez, bu nedenle URL'ye tepki veren bir JavaScript kodu yaparsanız, onlarla bu şekilde çalışabilirsiniz.

Ayrıca history.replaceState(), tam olarak aynı şeyi yapan şey var, ancak yeni bir tarih oluşturmak yerine mevcut geçmişi değiştirecek!

Ayrıca var olup olmadığını kontrol etmek için bir işlev oluşturabilir history.pushState, ardından geri kalanını şu şekilde devam ettirebilirsiniz :

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

Ayrıca , sayfayı yeniden yüklemeyecek olan #for öğesini de değiştirebilirsiniz <HTML5 browsers. Angular, hashtag'e göre SPA yapmak için bu şekilde kullanır ...

Değiştirmek #oldukça kolaydır, şöyle yapmak:

window.location.hash = "example";

Ve bunu şu şekilde tespit edebilirsiniz:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

HTML5 replaceState, Vivart ve geo1701 tarafından daha önce belirtildiği gibi cevaptı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.

HTML5'ten önce şunları kullanabiliriz:

parent.location.hash = "hello";

ve:

window.location.replace("http:www.example.com");

Bu yöntem sayfanızı yeniden yükleyecektir, ancak HTML5 history.pushState(page, caption, replace_url), sayfanızı yeniden yüklememesi gereken tanıttı .

Yapmaya çalıştığınız kullanıcılar sayfalara yer işareti koyma / paylaşma izni veriyorsa ve bunun tam olarak doğru URL olması gerekmiyorsa ve başka bir şey için karma çapa kullanmıyorsanız, bunu ikide yapabilirsiniz parçaları; yukarıda tartışılan location.hash öğesini kullanırsınız ve daha sonra giriş sayfasında bir karma bağlantı içeren bir URL aramak için bir kontrol uygular ve sizi sonraki sonuca yönlendirirsiniz.

Örneğin:

1) Kullanıcı açık www.site.com/section/page/4

2) Kullanıcı, URL'yi www.site.com/#/section/page/6(karma ile) değiştiren bazı işlemler yapar . Sayfa 6 için doğru içeriği sayfaya yüklediğinizi varsayalım, bu nedenle karma dışında kullanıcı çok rahatsız olmaz.

3) Kullanıcı bu URL'yi başka birine aktarır veya yer imlerine ekler

4) Daha sonraki bir tarihte başka biri veya aynı kullanıcı şu adrese gider: www.site.com/#/section/page/6

5) Kod www.site.com/, kullanıcıyı şu şekilde www.site.com/section/page/6kullanarak yönlendirir :

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Umarım mantıklıdır! Bazı durumlar için yararlı bir yaklaşımdır.

Aşağıda, sayfayı yeniden yüklemeden URL'yi değiştirme işlevi verilmiştir. Yalnızca HTML5 için desteklenir.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Konumda yapılan herhangi bir değişiklik (ya window.locationda document.location), yalnızca URL parçasını değiştirmiyorsanız, bu yeni URL'de bir talebe neden olur. URL'yi değiştirirseniz, URL'yi değiştirirsiniz.

Şu anda kullandığınız URL'leri beğenmiyorsanız Apache'nin mod_rewrite gibi sunucu tarafı URL yeniden yazma tekniklerini kullanın .

Bağlantı etiketleri ekleyebilirsiniz. Bunu sitemde kullanıyorum, böylece kullanıcıların sayfada ne ziyaret ettiğini Google Analytics ile takip edebilirim.

Sadece bir tutturucu etiketi ve ardından sayfanın izlemek istediğim kısmını ekliyorum:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Thomas Stjernegaard Jeppesen'in işaret ettiği gibi , kullanıcı Ajax bağlantılarınız ve uygulamalarınız arasında gezinirken URL parametrelerini değiştirmek için History.js'yi kullanabilirsiniz .

Bu yanıttan bu yana neredeyse bir yıl geçti ve History.js büyüdü ve daha kararlı ve tarayıcılar arası hale geldi. Artık HTML5 uyumlu birçok HTML4 tarayıcısında geçmiş durumlarını yönetmek için kullanılabilir. Bu demoda nasıl çalıştığına dair bir örnek görebilirsiniz (işlevlerini ve sınırlarını deneyebilmenin yanı sıra).

Bu kütüphaneyi nasıl kullanacağınız ve uygulayacağınız konusunda yardıma ihtiyacınız olursa, demo sayfasının kaynak koduna göz atmanızı öneririm: Yapmanın çok kolay olduğunu göreceksiniz.

Son olarak, hash (ve hashbangs) kullanımıyla ilgili sorunların neler olabileceğine dair kapsamlı bir açıklama için Benjamin Lupton tarafından bu bağlantıya göz atın .

history.pushState()HTML 5 Geçmiş API'sından kullanın .

Daha fazla ayrıntı için HTML5 Geçmiş API'sına bakın.

Uygulamanızın herhangi bir yerinde bu güzel ve basit işlevi kullanabilirsiniz.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

URL'yi yalnızca düzenlemekle kalmaz, aynı zamanda başlığı da güncelleyebilirsiniz.

Herkese oldukça yardımcı oldu.