Tutorial yang bagus untuk menggunakan API Riwayat HTML5 (Pushstate?) [Ditutup]

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.

http://html5demos.com/history

Untuk tutorial yang luar biasa, halaman Jaringan Pengembang Mozilla tentang fungsi ini yang Anda butuhkan: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Sayangnya, HTML5 History API diimplementasikan secara berbeda di semua browser HTML5 (membuatnya tidak konsisten dan bermasalah) dan tidak memiliki cadangan untuk browser HTML4. Untungnya, History.js memberikan kompatibilitas silang untuk browser HTML5 (memastikan semua browser HTML5 berfungsi seperti yang diharapkan) dan secara opsional menyediakan hash-fallback untuk browser HTML4 (termasuk dukungan yang dipertahankan untuk data, judul, fungsi pushState dan replaceState).

Anda dapat membaca lebih lanjut tentang History.js di sini: https://github.com/browserstate/history.js

Untuk artikel tentang Hashbangs VS Hash VS HTML5 History API, lihat di sini: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

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

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):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;

The sejarah HTML5 spesifikasi unik.

history.pushState()tidak mengirim popstateacara 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 mengirim popstateacara atau menggunakan history.go()untuk menavigasi ke negara baru. Idenya adalah router dapat mendengarkan popstateacara dan melakukan navigasi untuk Anda.

Beberapa hal yang perlu diperhatikan:

• history.pushState()dan history.replaceState()jangan kirim popstateacara.
• history.back(),, history.forward()dan tombol kembali dan maju browser melakukan pengiriman popstateacara.
• history.go()dan history.go(0)memuat ulang satu halaman penuh dan tidak mengirim popstateacara.
• history.go(-1)(belakang 1 halaman) dan history.go(1)(maju 1 halaman) melakukan pengiriman popstateacara.

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 popstateacara dengan router.

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.

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

Anda mungkin ingin melihat plugin jQuery ini. Mereka memiliki banyak contoh di situs mereka. http://www.asual.com/jquery/address/

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:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

Berikut adalah biola kecil yang saya buat untuk menunjukkan penggunaannya.

jika jQuery tersedia, Anda bisa menggunakan jQuery BBQ