Saya menggunakan Ajax dan hash untuk navigasi.
Apakah ada cara untuk memeriksa apakah window.location.hash
berubah seperti ini?
http://example.com/blah # 123 hingga http://example.com/blah # 456
Ini berfungsi jika saya memeriksanya ketika dokumen dimuat.
Tetapi jika saya memiliki navigasi berbasis # hase itu tidak berfungsi ketika saya menekan tombol kembali pada browser (jadi saya melompat dari bla # 456 ke bla # 123).
Itu terlihat di dalam kotak alamat, tapi saya tidak bisa menangkapnya dengan JavaScript.
Jawaban:
Satu-satunya cara untuk benar-benar melakukan ini (dan adalah bagaimana 'reallysimplehistory' melakukan ini), adalah dengan menetapkan interval yang terus memeriksa hash saat ini, dan membandingkannya dengan apa yang sebelumnya, kami melakukan ini dan membiarkan pelanggan berlangganan untuk berubah acara yang kami jalankan jika hash berubah .. itu tidak sempurna tetapi browser benar-benar tidak mendukung acara ini secara asli.
Perbarui untuk menjaga agar jawaban ini tetap segar:
Jika Anda menggunakan jQuery (yang hari ini harus agak mendasar untuk sebagian besar) maka solusi yang bagus adalah dengan menggunakan abstraksi yang jQuery berikan kepada Anda dengan menggunakan sistem kejadiannya untuk mendengarkan acara hashchange pada objek jendela.
Yang menyenangkan di sini adalah Anda dapat menulis kode yang tidak perlu khawatir tentang dukungan hashchange, namun Anda DO perlu melakukan beberapa keajaiban, dalam bentuk fitur jQuery yang agak kurang dikenal jQuery acara khusus .
Dengan fitur ini Anda pada dasarnya menjalankan beberapa kode pengaturan untuk acara apa pun, pertama kali seseorang mencoba menggunakan acara dengan cara apa pun (seperti mengikat ke acara).
Dalam kode pengaturan ini Anda dapat memeriksa dukungan browser asli dan jika browser tidak mengimplementasikannya secara native, Anda dapat mengatur timer tunggal untuk melakukan polling untuk perubahan, dan memicu acara jQuery.
Ini benar-benar melepaskan ikatan kode Anda dari kebutuhan untuk memahami masalah dukungan ini, pelaksanaan acara khusus semacam ini sepele (untuk mendapatkan versi kerja 98% sederhana), tetapi mengapa melakukan itu ketika orang lain sudah melakukannya .
sumber
hashchange
acara, sedangkan Safari (stabil) belum.hashchange
acara sekarang banyak didukung: caniuse.com/#search=hashHTML5 menentukan
hashchange
acara . Acara ini sekarang didukung oleh semua browser modern . Dukungan telah ditambahkan di versi browser berikut:sumber
window.onhashchange = function() { doYourStuff(); }
Perhatikan bahwa dalam kasus Internet Explorer 7 dan Internet Explorer 9
if
statment akan memberikan true (untuk "onhashchange" di windows), tetapiwindow.onhashchange
itu tidak akan pernah menyala, jadi lebih baik menyimpan hash dan memeriksanya setelah setiap 100 milidetik apakah itu diubah atau tidak untuk semua versi Internet Explorer.EDIT - Sejak jQuery 1.9,
$.browser.msie
tidak didukung. Sumber: http://api.jquery.com/jquery.browser/sumber
Ada banyak trik untuk menangani History dan window.location.hash di browser IE:
Seperti yang dikatakan pertanyaan awal, jika Anda beralih dari halaman a.html # b ke a.html # c, lalu tekan tombol kembali, browser tidak tahu halaman itu telah berubah. Izinkan saya mengatakannya dengan sebuah contoh: window.location.href akan menjadi 'a.html # c', tidak masalah jika Anda berada di a.html # b atau a.html # c.
Sebenarnya, a.html # b dan a.html # c disimpan dalam riwayat hanya jika elemen '<a name="#b">' dan '<a name="#c">' ada sebelumnya di halaman.
Namun, jika Anda meletakkan iframe di dalam halaman, navigasikan dari a.html # b ke a.html # c di iframe itu lalu tekan tombol kembali, iframe.contentWindow.document.location.href berubah seperti yang diharapkan.
Jika Anda menggunakan 'document.domain = something ' dalam kode Anda, maka Anda tidak dapat mengakses iframe.contentWindow.document.open () '(dan banyak Manajer Sejarah melakukannya)
Saya tahu ini bukan respons nyata, tapi mungkin catatan IE-History berguna bagi seseorang.
sumber
Firefox telah mengadakan acara onhashchange sejak 3.6. Lihat window.onhashchange .
sumber
Ben Alman memiliki plugin jQuery yang bagus untuk menangani hal ini: http://benalman.com/projects/jquery-hashchange-plugin/
Jika Anda tidak menggunakan jQuery, itu mungkin referensi yang menarik untuk membedah.
sumber
Anda dapat dengan mudah menerapkan pengamat (metode "menonton") pada properti "hash" objek "window.location".
Firefox memiliki implementasi sendiri untuk menonton perubahan objek , tetapi jika Anda menggunakan beberapa implementasi lainnya (seperti Perhatikan perubahan properti objek dalam JavaScript ) - untuk browser lain, itu akan melakukan trik.
Kode akan terlihat seperti ini:
Maka Anda dapat mengujinya:
Dan tentu saja itu akan memicu fungsi pengamat Anda.
sumber
watch
objek yang memiliki properti yang berubah dan Anda ingin mengamatinya.Saya menggunakan ini dalam aplikasi reaksi untuk membuat URL menampilkan parameter yang berbeda tergantung pada tampilan pengguna yang aktif.
Saya menyaksikan menggunakan parameter hash
Kemudian
Bekerja dengan baik, bekerja dengan tombol browser maju dan mundur dan juga dalam riwayat browser.
sumber
addEventListener
panggilan Anda, Anda harus menghapus()
daridoSomethingWithChangeFunction
()
. TheaddEventListener
Fungsi mengharuskan Anda untuk lulus dalam suatu fungsi.doSomethingWithChangeFunction
adalah suatu fungsi.doSomethingWithChangeFunction()
adalah nilai pengembalian fungsi itu, yang dalam hal ini bukan fungsi.Implementasi yang layak dapat ditemukan di http://code.google.com/p/reallysimplehistory/ . Satu-satunya (dan juga) masalah dan bug yang dimilikinya adalah: di Internet Explorer memodifikasi hash lokasi secara manual akan mengatur ulang seluruh tumpukan riwayat (ini adalah masalah browser dan tidak dapat dipecahkan).
Catatan, Internet Explorer 8 memang memiliki dukungan untuk acara "hashchange", dan karena itu menjadi bagian dari HTML5, Anda mungkin mengharapkan browser lain untuk mengejar ketinggalan.
sumber
Implementasi hebat lainnya adalah jQuery History yang akan menggunakan acara onhashchange asli jika didukung oleh browser, jika tidak maka akan menggunakan iframe atau interval dengan tepat untuk browser untuk memastikan semua fungsi yang diharapkan berhasil ditiru. Ini juga menyediakan antarmuka yang bagus untuk mengikat ke kondisi tertentu.
Proyek lain yang juga perlu diperhatikan adalah jQuery Ajaxy yang merupakan perpanjangan dari jQuery History untuk menambahkan ajax ke dalam campuran. Seperti ketika Anda mulai menggunakan ajax dengan hash itu cukup rumit !
sumber
Itu saja ... sekarang, kapan pun Anda menekan tombol kembali atau maju, halaman akan dimuat ulang sesuai nilai hash baru.
sumber
Saya telah menggunakan path.js untuk routing sisi klien saya. Saya menemukan ini cukup ringkas dan ringan (juga telah dipublikasikan ke NPM), dan menggunakan navigasi berbasis hash.
path.js NPM
path.js GitHub
sumber
Saya menggunakan plugin jQuery, HUtil , dan menulis antarmuka seperti Sejarah YUI di atasnya.
Lihat sekali. Jika Anda membutuhkan bantuan, saya dapat membantu.
sumber