Di - window.location.hash - Ubah?

Saya menggunakan Ajax dan hash untuk navigasi.

Apakah ada cara untuk memeriksa apakah window.location.hashberubah 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.

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.

$(window).on('hashchange', function() {
  //.. work ..
});

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 .

HTML5 menentukan hashchangeacara . Acara ini sekarang didukung oleh semua browser modern . Dukungan telah ditambahkan di versi browser berikut:

• Internet Explorer 8
• Firefox 3.6
• Chrome 5
• Safari 5
• Opera 10.6

Perhatikan bahwa dalam kasus Internet Explorer 7 dan Internet Explorer 9 ifstatment akan memberikan true (untuk "onhashchange" di windows), tetapi window.onhashchangeitu 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.

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

EDIT - Sejak jQuery 1.9, $.browser.msietidak didukung. Sumber: http://api.jquery.com/jquery.browser/

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.

Firefox telah mengadakan acara onhashchange sejak 3.6. Lihat window.onhashchange .

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.

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:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

Maka Anda dapat mengujinya:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

Dan tentu saja itu akan memicu fungsi pengamat Anda.

Saya menggunakan ini dalam aplikasi reaksi untuk membuat URL menampilkan parameter yang berbeda tergantung pada tampilan pengguna yang aktif.

Saya menyaksikan menggunakan parameter hash

window.addEventListener('hashchange', doSomethingWithChangeFunction());

Kemudian

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

Bekerja dengan baik, bekerja dengan tombol browser maju dan mundur dan juga dalam riwayat browser.

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.

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 !

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

Itu saja ... sekarang, kapan pun Anda menekan tombol kembali atau maju, halaman akan dimuat ulang sesuai nilai hash baru.

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

Saya menggunakan plugin jQuery, HUtil , dan menulis antarmuka seperti Sejarah YUI di atasnya.

Lihat sekali. Jika Anda membutuhkan bantuan, saya dapat membantu.