Bagaimana saya bisa menulis kode panggilan balik JavaScript yang akan dijalankan pada setiap perubahan di jangkar URL?
Misalnya dari http://example.com#a
hinggahttp://example.com#b
sumber
Bagaimana saya bisa menulis kode panggilan balik JavaScript yang akan dijalankan pada setiap perubahan di jangkar URL?
Misalnya dari http://example.com#a
hinggahttp://example.com#b
Mesin Telusur Ubahsuaian Google menggunakan pengatur waktu untuk memeriksa hash terhadap nilai sebelumnya, sementara iframe turunan di domain terpisah memperbarui hash lokasi induk untuk memuat ukuran badan dokumen iframe. Saat pengatur waktu menangkap perubahan, orang tua dapat mengubah ukuran iframe agar sesuai dengan body sehingga scrollbar tidak ditampilkan.
Sesuatu seperti berikut mencapai hal yang sama:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100); // Google uses 100ms intervals I think, might be lower
Google Chrome 5, Safari 5, Opera 10.60 , Firefox 3.6 dan Internet Explorer 8 semuanya mendukung hashchange
acara tersebut:
if ("onhashchange" in window) // does the browser support the hashchange event?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
dan menggabungkannya:
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100);
}
jQuery juga memiliki plugin yang akan memeriksa event hashchange dan menyediakannya sendiri jika perlu - http://benalman.com/projects/jquery-hashchange-plugin/ .
EDIT : Dukungan browser yang diperbarui (lagi).
var storedHash = window.location.hash;
ke blok ringkasan penyatuan. Btw: Sekarang ini disebut polyfill.hashChange
diwindow
stackoverflow.com/questions/6390341/how-to-detect-url-changehashChanged(storedHash);
hashChanged
dalam hal ini, dimaksudkan sebagai fungsi yang diimplementasikan oleh pengembang menggunakan kode ini. Jawabannya di sini hanya menunjukkan bagaimana seseorang dapat memantau hash untuk perubahan ketikaonhashchange
acara tidak tersedia, dan menggabungkan pendekatan berbasis peristiwa dan berbasis waktu untuk memberikan solusi universal. Maksud saya adalah bahwa jawaban yang Anda tautkan sama sekali tidak menambahkan apa-apa ke jawaban di sini ;-). Mereka memberikan informasi dasar yang sama, bahkan tautan ke plugin jQuery Ben Alman. Satu-satunya perbedaan adalah saya memberikan solusi JS murni dalam jawaban saya.Saya akan merekomendasikan penggunaan
addEventListener
alih-alih menimpawindow.onhashchange
, jika tidak, Anda akan memblokir acara untuk plugin lain.window.addEventListener('hashchange', function() { ... })
Melihat penggunaan browser global saat ini, penggantian tidak diperlukan lagi.
sumber
Dari apa yang saya lihat di pertanyaan SO lainnya, satu-satunya solusi lintas-browser yang bisa diterapkan adalah pengatur waktu. Lihat pertanyaan ini sebagai contoh.
sumber
setInterval()
hanya solusi universal untuk saat ini. Namun ada beberapa cahaya di masa depan berupa event hashchangesumber
onhashchange
acara di Mozilla Developer Network(Sekadar catatan.) Peristiwa sintetis "hashchange" YUI3 melakukan hal yang kurang lebih sama dengan jawaban yang diterima
YUI().use('history-hash', function (Y) { Y.on('hashchange', function (e) { // Handle hashchange events on the current window. }, Y.config.win); });
sumber
Anda bisa mendapatkan info lebih lanjut dari ini
Jenis peristiwa mutasi
sumber