Saya melihat ke dalam menggunakan API Sejarah HTML5 untuk menyelesaikan masalah penautan yang mendalam dengan konten yang dimuat AJAX, tapi saya berjuang untuk keluar dari tanah. Apakah ada yang tahu sumber daya yang bagus?
Saya ingin menggunakan ini karena tampaknya cara yang bagus untuk memungkinkan kemungkinan mereka yang mengirim tautan mungkin tidak mengaktifkan JS. Banyak solusi gagal ketika seseorang dengan JS mengirim tautan ke seseorang tanpa.
Penelitian awal saya tampaknya mengarah ke API Sejarah dalam JS, dan metode pushState.
sumber
Saya mendapat banyak manfaat dari 'Menyelam ke HTML 5'. Penjelasan dan demo lebih mudah dan to the point. Bab sejarah - http://diveintohtml5.info/history.html dan demo riwayat - http://diveintohtml5.info/examples/history/fer.html
sumber
Perlu diingat saat menggunakan pushstate HTML5 jika pengguna menyalin atau menandai tautan yang dalam dan mengunjunginya lagi, maka itu akan menjadi hit server langsung yang akan 404 sehingga Anda harus siap untuk itu dan bahkan perpustakaan pushstate js tidak akan membantu kamu. Solusi termudah adalah menambahkan aturan penulisan ulang ke server Nginx atau Apache Anda seperti:
Apache (di vhost Anda jika Anda menggunakannya):
Nginx
sumber
The sejarah HTML5 spesifikasi unik.
history.pushState()
tidak mengirimpopstate
acara atau memuat halaman baru dengan sendirinya. Itu hanya dimaksudkan untuk mendorong negara ke dalam sejarah. Ini adalah fitur "undo" untuk aplikasi satu halaman. Anda harus secara manual mengirimpopstate
acara atau menggunakanhistory.go()
untuk menavigasi ke negara baru. Idenya adalah router dapat mendengarkanpopstate
acara dan melakukan navigasi untuk Anda.Beberapa hal yang perlu diperhatikan:
history.pushState()
danhistory.replaceState()
jangan kirimpopstate
acara.history.back()
,,history.forward()
dan tombol kembali dan maju browser melakukan pengirimanpopstate
acara.history.go()
danhistory.go(0)
memuat ulang satu halaman penuh dan tidak mengirimpopstate
acara.history.go(-1)
(belakang 1 halaman) danhistory.go(1)
(maju 1 halaman) melakukan pengirimanpopstate
acara.Anda dapat menggunakan API riwayat seperti ini untuk mendorong status baru DAN mengirim acara popstate.
history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));
Kemudian dengarkan
popstate
acara dengan router.sumber
new PopStateEvent(...)
sepertinya tidak berfungsi di IE11? Apakah ada solusi yang diketahui orang?var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
Anda dapat mencoba Davis.js , ini memberi Anda perutean di JavaScript menggunakan pushState bila tersedia dan tanpa JavaScript memungkinkan kode sisi server Anda untuk menangani permintaan.
sumber
Berikut ini adalah screen-cast yang bagus untuk topik oleh Ryan Bates dari railscasts. Pada akhirnya ia hanya menonaktifkan fungsionalitas ajax jika metode history.pushState tidak tersedia:
http://railscasts.com/episodes/246-ajax-history-state
sumber
Anda mungkin ingin melihat plugin jQuery ini. Mereka memiliki banyak contoh di situs mereka. http://www.asual.com/jquery/address/
sumber
Saya telah menulis abstraksi router yang sangat sederhana di atas History.js, yang disebut StateRouter.js . Ini masih dalam tahap awal pengembangan, tetapi saya menggunakannya sebagai solusi perutean dalam aplikasi satu halaman yang saya tulis. Seperti Anda, saya menemukan History.js sangat sulit untuk dipahami, terutama karena saya cukup baru untuk JavaScript, sampai saya mengerti bahwa Anda benar-benar membutuhkan (atau seharusnya memiliki) abstraksi perutean di atasnya, karena ia menyelesaikan level rendah masalah.
Contoh kode sederhana ini harus menunjukkan bagaimana itu digunakan:
Berikut adalah biola kecil yang saya buat untuk menunjukkan penggunaannya.
sumber
jika jQuery tersedia, Anda bisa menggunakan jQuery BBQ
sumber