Tangani peristiwa perubahan jangkar URL di js

90

Bagaimana saya bisa menulis kode panggilan balik JavaScript yang akan dijalankan pada setiap perubahan di jangkar URL?

Misalnya dari http://example.com#ahinggahttp://example.com#b

— Bogdan Gusiev
sumber

128

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 hashchangeacara 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).

— Andy E
sumber

untuk kelengkapan, tambahkan var storedHash = window.location.hash;ke blok ringkasan penyatuan. Btw: Sekarang ini disebut polyfill.

— Frank Nocke

1

Saat ini Anda dapat mendengarkan hashChangedi window stackoverflow.com/questions/6390341/how-to-detect-url-change

— Timo Huovinen

@AndyE Saya membaca jawabannya, saya melewatkan catatan kecil itu, dan saya belum pernah melihat kejadian seperti ituhashChanged(storedHash);

— Timo Huovinen

1

@TimoHuovinen:, hashChangeddalam hal ini, dimaksudkan sebagai fungsi yang diimplementasikan oleh pengembang menggunakan kode ini. Jawabannya di sini hanya menunjukkan bagaimana seseorang dapat memantau hash untuk perubahan ketika onhashchangeacara 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.

— Andy E

1

Saya sedang mencari beberapa router JS ringan, tetapi ini berfungsi dengan baik. Juga menghilangkan semua dependensi :)

— gskema

5

Saya akan merekomendasikan penggunaan addEventListeneralih-alih menimpa window.onhashchange, jika tidak, Anda akan memblokir acara untuk plugin lain.

window.addEventListener('hashchange', function() {
...
})

Melihat penggunaan browser global saat ini, penggantian tidak diperlukan lagi.

— Fabian von Ellerts
sumber

3

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.

— Pekka
sumber

3

setInterval()hanya solusi universal untuk saat ini. Namun ada beberapa cahaya di masa depan berupa event hashchange

— NilColor
sumber

FYI: dokumentasionhashchange acara di Mozilla Developer Network

2

(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);
});

— mjhm
sumber

0

Anda bisa mendapatkan info lebih lanjut dari ini

Jenis peristiwa mutasi

Modul kejadian mutasi dirancang untuk memungkinkan pemberitahuan tentang setiap perubahan pada struktur dokumen, termasuk modifikasi attr dan teks.

— rahul
sumber

Ini tentang perubahan DOM.

— Raj