Bagaimana cara saya memodifikasi URL tanpa memuat ulang halaman?

Apakah ada cara saya dapat memodifikasi URL halaman saat ini tanpa memuat ulang halaman?

Saya ingin mengakses bagian sebelum # hash jika memungkinkan.

Saya hanya perlu mengubah bagian setelah domain, jadi saya tidak melanggar kebijakan lintas domain.

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

Ini sekarang dapat dilakukan di Chrome, Safari, Firefox 4+, dan Internet Explorer 10pp4 +!

Lihat jawaban pertanyaan ini untuk informasi lebih lanjut: Memperbarui bilah alamat dengan URL baru tanpa hash atau memuat ulang halaman

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 dapat menggunakan window.onpopstateuntuk mendeteksi navigasi tombol kembali / maju:

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

Untuk melihat lebih dalam tentang memanipulasi riwayat browser, lihat artikel MDN ini .

HTML5 memperkenalkan history.pushState()dan history.replaceState()metode, yang memungkinkan Anda untuk menambah dan memodifikasi entri riwayat.

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

Baca lebih lanjut tentang ini dari sini

Anda juga dapat menggunakan HTML5 replaceState jika Anda ingin mengubah url tetapi tidak ingin menambahkan entri ke riwayat browser:

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

Ini akan 'merusak' fungsi tombol kembali. Ini mungkin diperlukan dalam beberapa kasus seperti galeri gambar (di mana Anda ingin tombol kembali untuk kembali ke halaman indeks galeri alih-alih bergerak kembali melalui setiap gambar yang Anda lihat) sambil memberikan masing-masing gambar url unik sendiri.

Ini solusi saya (newUrl adalah URL baru Anda yang ingin Anda ganti dengan yang sekarang):

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

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

Tidak ada cara untuk memodifikasi URL di browser tanpa memuat ulang halaman. URL tersebut mewakili apa halaman yang terakhir dimuat. Jika Anda mengubahnya ( document.location) maka itu akan memuat ulang halaman.

Salah satu alasan yang jelas adalah, Anda menulis situs www.mysite.comyang terlihat seperti halaman login bank. Kemudian Anda mengubah bilah URL browser untuk mengatakan www.mybank.com. Pengguna akan sama sekali tidak menyadari bahwa mereka benar-benar melihat www.mysite.com.

parent.location.hash = "hello";

Di browser modern dan HTML5 , ada metode yang disebut pushStatedi jendela history. Itu akan mengubah URL dan mendorongnya ke histori tanpa memuat halaman.

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

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

Ini akan mengubah URL, tetapi tidak memuat ulang halaman. Juga, itu tidak memeriksa apakah halaman itu ada, jadi jika Anda melakukan beberapa kode JavaScript yang bereaksi terhadap URL, Anda dapat bekerja dengan mereka seperti ini.

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

Anda juga dapat membuat fungsi untuk memeriksa apakah history.pushStateada, kemudian melanjutkan dengan yang lain 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 <HTML5 browsers, yang tidak akan memuat ulang halaman. Itulah cara Angular menggunakan untuk melakukan SPA sesuai dengan ...

Mengubahnya #cukup mudah, lakukan seperti:

window.location.hash = "example";

Dan Anda dapat mendeteksinya seperti ini:

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

HTML5 replaceState adalah jawabannya, seperti yang telah disebutkan oleh Vivart dan geo1701. Namun itu tidak didukung di semua browser / versi. History.js membungkus fitur status HTML5 dan menyediakan dukungan tambahan untuk browser HTML4.

Sebelum HTML5 kita dapat menggunakan:

parent.location.hash = "hello";

dan:

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

Metode ini akan memuat ulang halaman Anda, tetapi HTML5 memperkenalkan history.pushState(page, caption, replace_url)yang seharusnya tidak memuat ulang halaman Anda.

Jika yang Anda coba lakukan adalah memungkinkan pengguna untuk menandai / berbagi halaman, dan Anda tidak perlu URL yang tepat, dan Anda tidak menggunakan jangkar hash untuk hal lain, maka Anda dapat melakukannya dalam dua bagian; Anda menggunakan location.hash yang dibahas di atas, dan kemudian menerapkan pemeriksaan pada halaman beranda, untuk mencari URL dengan jangkar hash di dalamnya, dan mengarahkan Anda ke hasil selanjutnya.

Contohnya:

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

2) Pengguna melakukan beberapa tindakan yang mengubah URL menjadi www.site.com/#/section/page/6(dengan hash). Katakanlah Anda telah memuat konten yang benar untuk halaman 6 ke dalam halaman, jadi selain dari hash pengguna tidak terlalu terganggu.

3) Pengguna meneruskan URL ini ke orang lain, atau menandainya

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

5) Kode pada www.site.com/pengalihan 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 itu masuk akal! Ini pendekatan yang berguna untuk beberapa situasi.

Di bawah ini adalah fungsi untuk mengubah URL tanpa memuat ulang halaman. 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 lokasi (baik window.locationatau document.location) akan menyebabkan permintaan pada URL baru itu, jika Anda tidak hanya mengubah fragmen URL. Jika Anda mengubah URL, Anda mengubah URL.

Gunakan teknik penulisan ulang URL sisi-server seperti mod_rewrite Apache jika Anda tidak menyukai URL yang sedang Anda gunakan.

Anda dapat menambahkan tag jangkar. Saya menggunakan ini di situs saya sehingga saya dapat melacak dengan Google Analytics apa yang orang kunjungi di halaman.

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

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 dapat menggunakan History.js untuk mengubah parameter URL sementara pengguna menavigasi melalui tautan dan aplikasi Ajax Anda.

Hampir satu tahun telah berlalu sejak jawaban itu, dan History.js tumbuh dan menjadi lebih stabil dan lintas-browser. Sekarang ini dapat digunakan untuk mengelola status riwayat di HTML5-compliant serta di banyak browser HTML4-only. Dalam demo ini, Anda dapat melihat contoh cara kerjanya (serta dapat mencoba fungsi dan batasannya.

Jika Anda memerlukan bantuan dalam cara menggunakan dan mengimplementasikan pustaka ini, saya sarankan Anda untuk melihat kode sumber dari halaman demo: Anda akan melihatnya sangat mudah dilakukan.

Akhirnya, untuk penjelasan komprehensif tentang apa yang bisa menjadi masalah tentang penggunaan hash (dan hashbangs), lihat tautan ini oleh Benjamin Lupton.

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

Rujuk ke API Sejarah HTML5 untuk detail lebih lanjut.

Anda dapat menggunakan fungsi yang indah dan sederhana ini di mana saja di aplikasi Anda.

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

Anda tidak hanya dapat mengedit URL tetapi Anda dapat memperbarui judul bersamaan dengan itu.

Semua orang cukup membantu.