Diperkenalkan sejak Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 memperkenalkan dua metode, histtory.pushState() dan history.replaceState(), yang memungkinkan penambahan dan modifikasi entitas riwayat. Pada saat yang sama, metode ini bekerja dengan peristiwa window.onpostate.
Ubah perujuk menggunakan metode history.pushState(), yang dapat digunakan dalam header http yang dibuat untuk objek xmlhttpRequest setelah status dimodifikasi. Perujuk ini akan menjadi URL dokumen saat XMLHttpRequest dibuat.
pushState digunakan untuk menambahkan catatan halaman saat ini ke riwayat, sementara replaceState dan pushState digunakan persis sama, satu-satunya perbedaan adalah digunakan untuk memodifikasi catatan halaman saat ini dalam riwayat.
contoh
Misalkan halaman http://mozilla.org/foo.html mengeksekusi JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "halaman 2", "bar.html");
Metode ini akan membuat bilah alamat URL ditampilkan http://mozilla.org/bar.html,Tetapi browser tidak akan memuat halaman bar.html, meskipun ada。
Sekarang sekali lagi asumsikan bahwa pengguna terus mengakses http://google.com dan mengklik kembali. Pada saat ini, bilah alamat url akan, http://mozilla.org/bar.html, halaman akan mendapatkan peristiwa popstate (chrome), yang akan berisi salinan stateObj. Halaman ini terlihat seperti foo.html. +
Pada titik ini, kita mengklik kembali lagi, dan URL akan berubah http://mozilla.org/foo.html,document akan mendapatkan peristiwa popstate lain dan objek status null. Tindakan pengembalian ini tidak mengubah konten dokumen. (Mungkin setelah beberapa saat akan mencoba memuat ...) krom)
metode pushState
pushState() memiliki tiga parameter: objek status, judul (sekarang diabaikan, tidak ditangani), URL (opsional). Spesifikasi:
· state object – Objek state adalah objek Javascrip{filter}t yang berhubungan dengan entitas riwayat baru yang dibuat oleh metode pushState(). Digunakan untuk menyimpan informasi tentang entri yang ingin Anda masukkan ke dalam riwayat. Objek State dapat berupa string Json apa pun. Karena Firefox menggunakan hard drive pengguna untuk mengakses objek state, ruang penyimpanan maksimum objek ini adalah 640k. Jika lebih besar dari nilai ini, metode pushState() melemparkan pengecualian. Jika Anda membutuhkan lebih banyak ruang untuk menyimpan, gunakan penyimpanan lokal.
· title—Firefox mengabaikan parameter ini sekarang, meskipun mungkin akan digunakan di masa mendatang. Cara teraman untuk menggunakannya sekarang adalah dengan meneruskan string kosong untuk mencegah modifikasi di masa mendatang. Atau Anda dapat meneruskan judul pendek untuk menunjukkan status
· URL - Parameter ini digunakan untuk meneruskan URL entitas riwayat baru, perhatikan bahwa browser tidak akan memuat URL ini setelah memanggil metode pushState(). Tapi mungkin setelah beberapa saat itu akan mencoba memuat URL ini. Misalnya, setelah pengguna memulai ulang browser, URL baru dapat bukan jalur absolut. Jika itu adalah jalur relatif, maka itu akan relatif terhadap URL yang ada. URL baru harus berdomain bersama dengan url yang ada, jika tidak, pushState() akan melemparkan pengecualian. Parameter ini bersifat opsional, dan jika kosong, parameter ini akan ditempatkan sebagai URL dokumen saat ini.
Dalam arti tertentu, memanggil metode pushState() sama seperti mengatur window.locatio{filter}n = "#foo", yang keduanya membuat dan mengaktifkan entitas riwayat lain yang terkait dengan dokumen saat ini, tetapi pushState() memiliki beberapa keuntungan tambahan:
URL baru dapat berupa URL apa pun yang berada di domain yang sama dengan URL saat ini, bukan window.locatio{filter}n yang tetap berada di dokumen yang sama jika hanya hash yang ditetapkan.
l Anda dapat membiarkan URL tidak diubah jika tidak perlu. Sebagai perbandingan, atur window.locatio{filter}n = "#foo"; Hanya entitas riwayat baru yang dibuat, jika hash Anda saat ini tidak #foo
Anda dapat mengaitkan data arbitrer dengan entitas riwayat baru Anda. Dengan pendekatan berbasis hash, semua data yang relevan perlu dikodekan menjadi string pendek.
Perhatikan bahwa metode pushState() tidak membuat waktu hashchange terjadi, bahkan jika url lama dan baru hanyalah hash yang berbeda.
replaceState()
history.replaceState() digunakan seperti pushState(), kecuali bahwa replaceState() digunakan untuk memodifikasi entitas riwayat saat ini alih-alih membuat yang baru. Metode ini terkadang dapat berguna ketika Anda perlu memperbarui objek status atau entitas riwayat saat ini sebagai respons terhadap perilaku pengguna tertentu, dan Anda dapat menggunakannya untuk memperbarui URL objek status atau entitas riwayat saat ini.
Acara Popstate
Ketika entitas riwayat diubah, peristiwa popstate akan terjadi. Jika entitas riwayat dihasilkan oleh metode pushState dan replaceState, atribut status peristiwa popstate akan berisi salinan objek status dari entitas riwayat
Lihat window.onpopstate untuk detailnya
Baca status saat ini
Baca status yang ada
Saat halaman dimuat, halaman mungkin memiliki objek status yang tidak kosong. Hal ini dapat terjadi ketika halaman menetapkan objek status (menggunakan pushState atau replaceState) dan pengguna memulai ulang browser. Saat halaman dimuat ulang, halaman akan menerima peristiwa onload, tetapi tidak akan ada peristiwa popstate. Namun, jika Anda membaca properti history.state, Anda akan mendapatkan objek state ini setelah peristiwa popstate terjadi
Dokumentasi History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Parameter URL penerima adalah jenis string, yang digunakan untuk mengubah URL bilah alamat saat ini. Satu hal yang perlu diperhatikan adalah bahwa parameter ini tidak boleh sama dengan lintas domain, yaitu protokol, nama domain, dan port harus sama.
DOMException yang tidak tertangkap: Gagal mengeksekusi 'pushState' pada 'History': Objek status histori dengan URL 'http://www.test.com/' tidak dapat dibuat dalam dokumen dengan asal ' https://www.itsvse.com' dan URL 'https://www.itsvse.com/'.
pada <anonymous>:1:9
Kode yang benar:
|
Diposting pada 12/09/2017 13.55.04
|
|
|
|
Diposting pada 27/10/2017 09.51.10