Bagaimana saya mengubah URL tanpa reload page?

Sekarang hal ini bisa dilakukan di Chrome, Safari, Firefox 4+, dan Internet Explorer 10pp4+!

Melihat pertanyaan ini's jawaban untuk informasi lebih lanjut: https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page

Contoh:

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

Anda kemudian dapat menggunakan jendela.onpopstate untuk mendeteksi kembali/maju tombol navigasi:

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

Untuk lebih mendalam melihat memanipulasi sejarah browser, lihat ini MDN article.

HTML5 memperkenalkan [history.pushState()](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method) dan [history.replaceState()](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method) metode, yang memungkinkan anda untuk menambahkan dan memodifikasi entri sejarah, masing-masing.

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

Baca lebih lanjut tentang hal ini dari di sini

Anda juga dapat menggunakan HTML5 replaceState jika anda ingin mengubah url tapi don't ingin menambahkan entri ke browser history:

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

Ini akan 'break' kembali tombol fungsi. Ini mungkin diperlukan dalam beberapa kasus seperti sebuah galeri gambar (di mana anda ingin tombol kembali untuk kembali ke galeri halaman indeks bukannya bergerak kembali melalui masing-masing dan setiap gambar yang anda lihat) sementara memberikan setiap gambar url yang unik.

CATATAN: Jika anda bekerja dengan HTML5 browser maka anda harus mengabaikan jawaban ini. Ini sekarang mungkin seperti yang dapat dilihat pada jawaban yang lain.

Tidak ada cara untuk memodifikasi URL di browser tanpa reload halaman. URL mewakili apa yang terakhir dimuat di halaman itu. Jika anda mengubah itu (document.lokasi) maka akan kembali halaman tersebut.

Salah satu alasan yang jelas, anda menulis sebuah situs di www.mysite.com yang terlihat seperti bank halaman login. Kemudian anda mengubah URL bar browser untuk mengatakan www.mybank.com. Pengguna akan benar-benar menyadari bahwa mereka benar-benar melihat www.mysite.com.

Berikut ini adalah solusi saya (newUrl adalah URL baru anda yang anda inginkan untuk mengganti dengan saat ini salah satu):

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

HTML5 replaceState adalah jawabannya, seperti yang sudah disebutkan oleh Vivart dan geo1701. Namun hal ini tidak didukung di semua browser/versi. History.js wrap HTML5 negara memiliki dan menyediakan dukungan tambahan untuk HTML4 browser.

Di modern browser dan HTML5, ada sebuah metode yang disebut pushState pada jendela sejarah. Yang akan mengubah URL dan mendorongnya ke sejarah tanpa loading halaman.

Anda dapat menggunakannya seperti ini, itu akan mengambil 3 parameter, 1) keadaan objek 2) judul dan URL):

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

Ini akan mengubah URL, tapi tidak reload halaman. Juga, itu doesn't memeriksa apakah halaman yang ada, sehingga jika anda melakukan beberapa kode JavaScript yang akan bereaksi dengan URL, anda dapat bekerja dengan mereka seperti ini.

Juga ada sejarah.replaceState() yang tidak persis hal yang sama, kecuali itu akan mengubah sejarah saat ini, bukan membuat yang baru!

Anda juga dapat membuat fungsi untuk memeriksa apakah sejarah.pushState ada, kemudian lanjutkan dengan sisa seperti ini:

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');

Anda juga dapat mengubah # untuk <browser HTML5, yang tidak't reload halaman. Yang's the way Sudut digunakan untuk melakukan LENGKAP menurut hashtag...

Mengubah # cukup mudah, lakukan seperti:

window.location.hash = "example";

Dan anda dapat mendeteksi itu seperti ini:

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

Sebelum HTML5, kita dapat menggunakan:

parent.location.hash = "hello";

dan:

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

Metode ini akan reload halaman anda, tetapi HTML5 memperkenalkan sejarah.pushState(halaman, keterangan, replace_url) yang tidak harus reload halaman anda.

Jika apa yang anda're coba lakukan adalah memungkinkan pengguna untuk bookmark/share halaman, dan anda don't perlu untuk menjadi benar-benar tepat URL, dan anda're tidak menggunakan hash jangkar untuk hal lain, maka anda dapat melakukan ini dalam dua bagian; anda menggunakan lokasi.hash yang dibahas di atas, dan kemudian melaksanakan cek di halaman rumah, untuk mencari URL dengan hash jangkar di dalamnya, dan mengarahkan anda untuk selanjutnya hasilnya.

Misalnya:

1. Pengguna www.site.com/section/page/4

2. Pengguna melakukan beberapa tindakan yang mengubah URL www.site.com/#/section/page/6 (dengan hash). Katakanlah anda've dimuat konten yang tepat untuk halaman 6 ke halaman, jadi selain dari hash pengguna tidak terlalu terganggu.

3. Pengguna lewat URL ini ke orang lain, atau bookmark ini

4. Orang lain, atau pengguna yang sama di kemudian hari, pergi ke www.site.com/#/section/page/6

5. Kode pada www.site.com/ mengarahkan pengguna ke www.site.com/section/page/6, menggunakan sesuatu seperti ini:

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

Harapan yang masuk akal! It's sebuah pendekatan yang berguna untuk beberapa situasi.

Di bawah ini adalah fungsi untuk mengubah URL tanpa reload halaman. Hal ini hanya didukung untuk HTML5.

  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');

Setiap perubahan layaknya (baik jendela.lokasi atau dokumen.lokasi) akan menyebabkan permintaan pada URL yang baru, jika anda tidak hanya mengubah URL fragmen. Jika anda mengubah URL, anda mengubah URL.

Menggunakan server-side URL rewrite teknik seperti Apache mod_rewrite jika anda tidak suka Url yang anda gunakan saat ini.

Anda dapat menambahkan tag anchor. Saya menggunakan ini di situs saya http://www.piano-chords.net/ sehingga saya bisa melacak dengan Google Analytics apa yang orang-orang sedang berada di halaman.

Saya hanya menambahkan sebuah tag anchor dan kemudian bagian dari halaman yang saya ingin melacak:

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

Seperti yang ditunjukkan oleh Thomas Stjernegaard Jeppesen, anda bisa menggunakan History.js untuk memodifikasi parameter URL sementara pengguna menavigasi melalui link Ajax dan aplikasi.

Hampir satu tahun telah berlalu sejak itu menjawab, dan History.js tumbuh dan menjadi lebih stabil dan cross-browser. Sekarang hal ini dapat digunakan untuk mengelola sejarah negara-negara di HTML5-compliant serta di banyak HTML4-satunya browser. Dalam hal ini demo Anda bisa melihat contoh dari cara kerjanya (serta mampu untuk mencoba fungsi dan batas-batas.

Jika anda memerlukan bantuan dalam cara menggunakan dan menerapkan perpustakaan ini, saya sarankan anda untuk melihat kode sumber dari halaman demo: anda akan melihat itu's sangat mudah untuk dilakukan.

Akhirnya, untuk penjelasan yang komprehensif tentang apa yang bisa menjadi masalah tentang menggunakan hash (dan hashbangs), check out link ini oleh Benjamin Lupton.

Gunakan sejarah.pushState() dari HTML 5 Sejarah API.

Merujuk ke HTML5 API Sejarah untuk lebih jelasnya.

Gunakan:

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

Anda bisa melihatnya di posting blog Update URL dari browser tanpa reload halaman.

Gunakan jendela.sejarah.pushState("objek atau string", "Judul", "/baru-url"), tapi itu masih akan mengirim URL baru permintaan ke server.

Dengan asumsi anda're tidak mencoba untuk melakukan sesuatu yang berbahaya, sesuatu yang anda'd ingin lakukan untuk anda sendiri Url yang dapat magicked menjadi ada dengan htaccess.