Ciri baharu sejarah HTML5 pushState, replaceState dan perbezaan antara dua kemahiran tutorial _html5

Objek tetingkap dalam DOM menyediakan akses kepada sejarah penyemak imbas melalui kaedah window.history, membolehkan anda bergerak ke hadapan dan ke belakang dalam rekod akses pengguna.

Bermula dengan HTML5, kita boleh mula memanipulasi timbunan sejarah ini.

1 Sejarah

Gunakan kaedah back(), forward(), dan go() untuk bergerak ke hadapan dalam sejarah pengguna dan Belakang

Maju dan Belakang

Belakang:

Salin kod

Kodnya adalah seperti berikut:

window.history.back();

Kaedah ini akan bertindak seperti pengguna mengklik kekunci belakang pada bar alat penyemak imbas.

Begitu juga, kaedah berikut juga boleh digunakan untuk menjana tingkah laku hadapan pengguna:

Salin kod

Kod adalah seperti berikut:

window.history.forward();

Alih ke kedudukan tertentu dalam sejarah

Anda boleh menggunakan Kaedah go() memuatkan halaman tertentu daripada sejarah sesi.

Alihkan satu halaman ke belakang:

Salin kod

Kodnya adalah seperti berikut:

window.history.go(-1);

Maju ke hadapan satu halaman:

Salin kod

Kodnya adalah seperti berikut:

window.history.go(1); anda boleh bergerak ke hadapan atau Kembali ke beberapa halaman.

Anda juga boleh mencari jumlah halaman dalam timbunan sejarah dengan menyemak sifat panjang sejarah penyemak imbas.

Salin kod

Kod tersebut adalah seperti berikut:

var numberOfEntries = window.history .length;

Nota: IE menyokong menghantar parameter URL ke kaedah go().

2. Tambah dan ubah suai entiti sejarah

Diperkenalkan sejak Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) HTML5 memperkenalkan dua kaedah history.pushState() dan history.replaceState(), yang membenarkan menambah dan mengubah suai entiti sejarah. Pada masa yang sama, kaedah ini akan berfungsi dengan peristiwa window.onpostate.

Gunakan kaedah history.pushState() untuk mengubah suai perujuk Kaedah ini boleh digunakan dalam pengepala http yang dibuat untuk objek xmlhttpRequest selepas mengubah keadaan. Perujuk ini akan menjadi URL dokumen semasa membuat XMLHttpRequest.

pushState digunakan untuk menambah rekod halaman semasa pada sejarah, manakala replaceState digunakan sama seperti pushState Satu-satunya perbezaan ialah ia digunakan untuk mengubah suai rekod halaman semasa dalam sejarah.

Contoh

Andaikan halaman http://mozilla.org/foo.html melaksanakan JS

Salin kod

Kodnya adalah seperti berikut:

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar. html ");

Kaedah ini akan menyebabkan bar alamat URL memaparkan http://mozilla.org/bar.html, tetapi penyemak imbas tidak akan memuatkan halaman bar.html, walaupun halaman ini wujud.

Sekarang sekali lagi andaikan pengguna terus ke http://google.com dan mengklik kembali. Pada masa ini, bar alamat url ialah, http://mozilla.org/bar.html, dan halaman akan mendapat acara popstate (chrome objek keadaan ini akan mengandungi salinan stateObj. Halaman ini kelihatan seperti foo.html.

Pada masa ini, kami mengklik kembali sekali lagi, URL akan menjadi http://mozilla.org/foo.html, dan dokumen itu akan mendapat satu lagi peristiwa popstate dan objek keadaan nol. Tindakan pengembalian ini tidak mengubah kandungan dokumen. (Mungkin cuba muatkan...chrome selepas beberapa ketika)

kaedah pushState

pushState() mempunyai tiga parameter: state object, title (kini diabaikan dan tidak diproses), URL (pilihan). Butiran khusus:

· objek keadaan – Objek keadaan ialah objek JavaScript, yang berkaitan dengan entiti sejarah baharu yang dicipta oleh kaedah pushState(). Digunakan untuk menyimpan maklumat tentang entri yang ingin anda masukkan ke dalam sejarah. Objek keadaan boleh menjadi sebarang rentetan Json. Oleh kerana Firefox akan menggunakan cakera keras pengguna untuk mengakses objek keadaan, ruang storan maksimum objek ini ialah 640k. Jika ia lebih besar daripada nilai ini, kaedah pushState() akan membuang pengecualian. Jika anda benar-benar memerlukan lebih banyak ruang untuk storan, gunakan storan tempatan.

· tajuk—firefox kini mengabaikan parameter ini, walaupun ia mungkin digunakan pada masa hadapan. Cara paling selamat untuk menggunakannya sekarang ialah dengan menghantar rentetan kosong untuk mengelakkan pengubahsuaian masa hadapan. Atau anda boleh menghantar tajuk pendek untuk mewakili keadaan

· URL—Parameter ini digunakan untuk menghantar URL entiti sejarah baharu Ambil perhatian bahawa penyemak imbas tidak akan memuatkan URL ini selepas memanggil kaedah pushState(). Tetapi mungkin ia akan cuba memuatkan URL ini selepas beberapa ketika. Contohnya, selepas pengguna memulakan semula penyemak imbas, URL baharu mungkin bukan laluan mutlak. Jika ia adalah laluan relatif, ia akan menjadi relatif kepada url sedia ada. Url baharu mesti berada dalam domain yang sama dengan url sedia ada, jika tidak pushState() akan membuang pengecualian. Parameter ini adalah pilihan Jika ia kosong, ia akan ditetapkan kepada URL semasa dokumen.

Dalam erti kata tertentu, memanggil kaedah pushState() sangat serupa dengan menetapkan window.location = "#foo". Kedua-duanya akan mencipta dan mengaktifkan entiti sejarah lain yang dikaitkan dengan dokumen semasa, tetapi pushState() )Terdapat juga beberapa kelebihan:

URL baharu boleh menjadi mana-mana url dalam domain yang sama dengan url semasa Sebaliknya, jika anda hanya menetapkan cincangan, window.location akan kekal dalam dokumen yang sama.

Anda tidak perlu mengubah suai url jika anda tidak perlu. Sebaliknya, menetapkan window.location = "#foo"; hanya menjana entiti sejarah baharu jika cincang semasa anda bukan #foo

anda boleh mengaitkan data sewenang-wenangnya dengan entiti sejarah baharu anda. Menggunakan kaedah berasaskan cincang, semua data yang berkaitan perlu dikodkan ke dalam rentetan pendek.

Perhatikan bahawa kaedah pushState() tidak akan menyebabkan masa pertukaran cincang berlaku, walaupun URL lama dan baharu hanya mempunyai cincang yang berbeza.

kaedah replaceState()

history.replaceState() digunakan sama seperti pushState(), kecuali replaceState() digunakan untuk mengubah suai entiti sejarah semasa dan bukannya mencipta yang baharu. Kaedah ini kadangkala berguna Apabila anda perlu mengemas kini objek keadaan atau entiti sejarah semasa sebagai tindak balas kepada tindakan pengguna tertentu, anda boleh menggunakannya untuk mengemas kini objek keadaan atau URL entiti sejarah semasa.

acara popstate

Apabila entiti sejarah ditukar, acara popstate akan berlaku. Jika entiti sejarah dijana oleh kaedah pushState dan replaceState, atribut keadaan bagi peristiwa popstate akan mengandungi salinan objek keadaan daripada entiti sejarah

Untuk butiran, lihat window.onpopstate

Baca keadaan semasa

Baca keadaan sedia ada

Apabila halaman dimuatkan, ia mungkin mempunyai objek keadaan bukan kosong. Ini mungkin berlaku apabila pengguna memulakan semula penyemak imbas selepas halaman menetapkan objek keadaan (menggunakan pushState atau replaceState). Apabila halaman dimuat semula, halaman akan menerima acara onload, tetapi tidak akan ada acara popstate. Walau bagaimanapun, jika anda membaca harta history.state, anda akan mendapat objek keadaan selepas peristiwa popstate berlaku
var currentState = history.state;
Pelayar HTML5

Chrome 8,9,10
Firefox 4 Safari 5 Opera 11
Safari iOS 4.3
Pelayar Safari iOS 4.3
HTML 🎜 >
IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS sebelum versi 4.3



PushState dan replaceState Difference

history.pushState(negeri, tajuk, url) --------------------- ------------------------------------------------- - ---------

Tambahkan URL semasa dan history.state pada sejarah dan gantikan yang semasa dengan keadaan dan URL baharu. Ia tidak akan menyebabkan halaman dimuat semula.

nyatakan: Nyatakan maklumat yang sepadan dengan URL yang hendak dilompat.

Titel: Es ist nicht erforderlich,

URL zu übergeben: URL-Adresse, zu der gesprungen werden soll, nicht domänenübergreifend.

history.replaceState(state, title, url)

---------------------------------------- -- ------------------------------------------------ --

Ersetzen Sie den aktuellen Status und die URL durch die neue. Die Seite wird dadurch nicht aktualisiert.

Status: Statusinformationen, die der URL entsprechen, zu der gesprungen werden soll.

Titel: Kann nicht übergeben werden

URL: URL-Adresse, zu der gesprungen werden soll, nicht domänenübergreifend.

---------------- ------ ------------------------------------

Es scheint Es gibt keinen Unterschied zwischen den beiden, aber tatsächlich besteht der große Unterschied darin, dass pushState Verlaufsdatensätze hinzufügt, während replaceState dies nicht tut.