Menggunakan URL hash dengan contoh jQuery

3 Banyak aplikasi web moden hari ini menggunakan URL hash Untuk menambah keunikan (seperti tag halaman, seksyen, tindakan dan lain -lain ...) ke halaman tanpa menyegarkannya Youn dapat mengenalinya. Ini berikutan daripada mendapatkan parameter URL menggunakan jQuery untuk lulus data dinamik ke halaman melalui melalui URL. Yang masih digunakan secara meluas di www.

window.location.hash vs document.url Mari kita lihat dengan cepat di kedua -dua dan di bawah adalah regex yang boleh anda gunakan untuk merebut tag hash.

PENTING: Lokasi.Hash tidak selamat untuk IE (termasuk IE9). Juga jika halaman anda mengandungi iframe maka selepas menyegarkan semula manual di dalam kandungan iframe mendapat lokasi lama. Nilai hasrat (untuk beban halaman pertama) manakala nilai yang diambil manual adalah berbeza daripada lokasi.

Jadi sebagai contoh untuk mengekstrak nilai tag hash harian anda akan melakukannya seperti ini:

cara lain yang layak

Ini adalah satu lagi cara yang baik menggunakan regex yang lebih berat (tanda pound adalah pilihan, kerana .match () tidak pernah kembali null).

<span>//using window.location.hash
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return window.location.hash.replace('#','');
</span><span>};
</span>$<span>.urlHash();</span>

gagal ...

<span>//IE Proof - URL Hash Grab - returns complete hash value
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return document.URL.substr(document.URL.indexOf('#')+1);
</span><span>};
</span>$<span>.urlHash();</span>

<span>//in context - extract dayofweek hash
</span><span>//eg  url#dayofweek1 would return 1
</span><span>if (document.URL.indexOf('#dayofweek'))
</span><span>{
</span>    week <span>= parseInt(document.URL.substr(document.URL.indexOf('#')+1).replace('dayofweek',''))-1;
</span>    $resParent<span>.eq(week).showResources();
</span><span>}</span>

Isu: Mengembalikan hasil yang salah apabila terdapat watak bukan Latin atau bukan alphanumer dalam hash. Sebagai contoh, untuk hash #foo@o #bar $%huh hello, hanya "foo" akan dikembalikan. Melemparkan typeError apabila location.hash kosong, kerana .match () akan kembali null

Dengan ujian hash yang sama, ia sekurang -kurangnya akan mendapatkan bahagian "foo@o", yang bermaksud ia hanya gagal apabila hash mengandungi tanda paun. Apabila tidak ada hash, ia tidak membuang kesilapan, walaupun ia kembali tidak ditentukan dan bukannya rentetan kosong.

bahan rujukan

<span>var match = location.hash.match(<span>/<span>^#?(.*)$</span>/</span>)[1];
</span><span>if (match)
</span><span>{
</span>   <span>//do stuff...
</span><span>}</span>

Dapatkan hash anda - cara peluru

Soalan Lazim (Soalan Lazim) Mengenai URL Hash

<span>var hash = location.hash.match(<span>/#<span>(w+)</span>/</span>)[1];</span>

Apakah url hash dan mengapa penting? Pengenalpastian ini digunakan untuk menunjuk ke bahagian tertentu dalam laman web. URL Hash adalah penting kerana mereka membenarkan pengguna untuk secara langsung menavigasi ke kandungan tertentu pada halaman, tanpa perlu menatal seluruh halaman. Ini amat berguna untuk laman web panjang dengan pelbagai bahagian. Di samping itu, URL hash boleh digunakan untuk mengekalkan keadaan dalam satu aplikasi web halaman tunggal, di mana hash berubah untuk mencerminkan pandangan semasa.

<span>var hash = location.hash.split('#')[1];</span>

Bagaimana saya boleh membuat URL hash? URL agak mudah. Apa yang perlu anda lakukan ialah menambahkan simbol hash (#) diikuti oleh pengecam ke URL anda. Sebagai contoh, jika anda mempunyai halaman di www.example.com dan anda ingin membuat URL hash yang menunjuk ke bahagian yang dipanggil 'Seksyen1', URL hash anda akan menjadi www.example.com#Section1.

Bagaimana saya boleh menggunakan jQuery untuk memanipulasi URL hash? Properti 'hash' objek 'lokasi' boleh digunakan untuk mendapatkan atau menetapkan bahagian hash URL. Sebagai contoh, untuk menetapkan hash ke 'Seksyen1', anda akan menggunakan location.Hash = 'Section1';. Untuk mendapatkan hash semasa, anda akan menggunakan var hash = location.hash;. Dengan menukar hash, anda boleh memuatkan kandungan yang berbeza tanpa menyegarkan halaman. Ini sering digunakan dalam aplikasi halaman tunggal untuk mencipta pengalaman pengguna yang lancar.

Bagaimana saya dapat mengesan perubahan hash dengan jQuery? perubahan. Anda boleh menggunakan acara ini untuk menjalankan kod apabila berubah hash. Sebagai contoh, $ (tetingkap) .on ('hashchange', fungsi () { / * kod anda di sini * /}) ;.

Adakah terdapat kelemahan untuk menggunakan URL hash? Walaupun URL hash boleh sangat berguna, terdapat beberapa kelemahan. Satu kelemahan utama ialah mereka boleh menyebabkan masalah dengan pengoptimuman enjin carian (SEO), kerana enjin carian mungkin tidak mengindeks kandungan yang berkaitan dengan hash. Di samping itu, URL hash boleh menyebabkan masalah dengan analisis, kerana mereka tidak selalu dikesan sebagai pandangan halaman yang berasingan. Tag Anchor untuk membuat 'Log Pautan' yang membolehkan pengguna menavigasi terus ke bahagian tertentu halaman. Hash dalam URL sepadan dengan atribut 'id' dari tag utama. Menetapkan harta 'hash' objek 'lokasi' ke rentetan kosong. Sebagai contoh, location.hash = '' ;.

Bolehkah saya menggunakan URL hash untuk menyimpan maklumat negeri? Ini sering digunakan dalam aplikasi halaman tunggal, di mana keadaan aplikasi disimpan dalam hash. Ini membolehkan pengguna menavigasi kembali ke keadaan yang sama dengan menggunakan butang belakang atau dengan menanda buku url. Menggunakan URL untuk menavigasi terus ke sekeping kandungan tertentu dalam halaman. URL Hash adalah sempurna untuk ini, kerana ia membolehkan anda menghubungkan terus ke bahagian tertentu halaman. Untuk menggunakan URL hash untuk menghubungkan yang mendalam, tambah hash dan pengecam bahagian ke url anda.

Atas ialah kandungan terperinci Menggunakan URL hash dengan contoh jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!