Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menyemak sama ada URL mengandungi cincang menggunakan JavaScript?

Bagaimana untuk menyemak sama ada URL mengandungi cincang menggunakan JavaScript?

王林
王林ke hadapan
2023-09-07 14:57:111056semak imbas

如何使用 JavaScript 检查 URL 是否包含哈希值?

Gambaran Keseluruhan

Gunakan JavaScript untuk menyemak sama ada Uniform Resource Locator (U.R.L.) mengandungi nilai cincang (#text) kerana JavaScript menyertakan beberapa kaedah pra-bina yang menjadikan mendapatkan sasaran tertentu tugas yang mudah. Ini boleh dilakukan dengan menggunakan sifat cincang dalam JavaScript, yang boleh diakses dengan memulakan objek window.location. Ia memudahkan antara muka pengguna dan menyediakan navigasi web yang sangat penting.

Untuk membina penyelesaian ini, kami memerlukan pengetahuan awal tentang topik berikut -

  • HTML - Bina rangka halaman anda. Di mana kami akan menggunakan teg f0fffe4d239e00d9036778dff1bfb4e5

  • Acara HTML (onclick(), onchange(), dll.)

  • Objek tetingkap JavaScript, objek kedudukan, atribut cincang.

Tatabahasa

Sintaks asas yang digunakan oleh program ini ialah -

window.location.hash
  • Window - Ini ialah objek JavaScript yang menentukan bingkai pelayar web. Ia mengendalikan kaedah khusus untuk penyemak imbas anda. Ciri Windows boleh diakses melalui

Sintaks:

rreeee
  • Lokasi - Ia adalah harta objek tetingkap yang mengandungi maklumat tentang URL halaman web semasa.

Sintaks:

rreeee
  • Hash - Ia adalah sifat objek lokasi yang mengandungi teks selepas #. Jika URL mengandungi "/tutorialspoint/#java". Kemudian location.hash akan mengembalikan nilai "java".

Algoritma

  • Langkah 1 - Buat butang HTML menggunakan teg 07cb10094d7fc1aeafbde86dbf86ce42

  • Langkah 2- Masukkan acara onclick dalam label butang 3b0c972ff6cb77ed3535e06ec1321ba5 dan masukkan fungsi di dalamnya, seperti 4626f3e1ab2a856a463d5a673373b42e . Nama fungsi ditakrifkan pengguna supaya anda boleh menukarnya mengikut keselesaan anda.

  • Langkah 3- Cipta fungsi anak panah JavaScript checkHash().

  • Langkah 4- Gunakan kaedah objek window lokasi dan kaedah lokasi hash. Simpan hasil window.location.hash dalam pembolehubah.

  • Langkah 5- Lulus pembolehubah sebagai syarat dalam if-else.

  • step 6 - Jika pembolehubah yang diluluskan dalam if-ELSE adalah benar, kembali "Hash dijumpai", jika pembolehubah yang diluluskan adalah palsu, kembali "Hash tidak dijumpai"

  • Contoh

Dalam kod yang diberikan, ia mengandungi butang HTML yang mengandungi pengendali acara "onclick()" yang memberikan fungsi yang ditakrifkan pengguna JavaScript "checkHash()". Apabila 07cb10094d7fc1aeafbde86dbf86ce42 diklik, fungsi checkHash() dicetuskan.

(window.property/methodName)

Selepas mengklik teks sauh -

Dalam keadaan ini, URL halaman web (http://127.0.0.1:3000/index.html) tidak mengandungi sebarang #teks, seperti yang ditunjukkan dalam bar alamat di bawah, jadi window.location .hash tidak akan dalam pembolehubah yang dirujuk untuk menyimpan apa-apa di dalamnya, jadi ia mengembalikan palsu dan mencetak "Cincang tidak dijumpai

."

Selepas mengklik pada teks sauh, nilai atribut HTML href="#java" digabungkan dengan URL semasa, jadi window.location.hash mengandungi teks cincang bercantum "#java", jadi mengembalikan nama sebenar bagi hash disimpan dalam pembolehubah " h" dan pembolehubah "h" akan disemak dalam keadaan if-else dan outputnya akan dipaparkan di dalam bekas id "outputVal".

Kesimpulan

Apabila pautan sauh diklik, ia akan mengubah hala kami ke kandungan cincang.

Ini memberikan pengguna antara muka interaktif dengan arah ke kandungan terpaut cincang. Objek lokasi juga mempunyai banyak sifat berfaedah, seperti href, asal, nama laluan dan banyak lagi. Objek Window juga menyediakan pelbagai kaedah untuk mengendalikan penyemak imbas, seperti lokasi, sejarah, buka(), tutup(), dll.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada URL mengandungi cincang menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam