javascript tidak boleh memaparkan hiperpautan

JavaScript sentiasa dianggap sebagai bahagian penting dalam pembangunan aplikasi web. Ia menambahkan banyak kesan dinamik pada halaman web. Sudah tentu, kami tidak boleh menafikan kekurangan dan batasan JavaScript. Salah satunya ialah ia tidak boleh memaparkan hiperpautan secara langsung.

Hiperpautan ialah salah satu elemen paling asas dan biasa dalam aplikasi web Ia membolehkan pengguna melompat antara halaman web yang berbeza dengan mudah. Melalui hiperpautan, kita boleh menunjuk satu halaman terus ke halaman lain, atau melompat antara laman web yang berbeza. Tiada satu pun daripada ini memerlukan pengguna melakukan sebarang operasi program, cuma klik pada teks, gambar atau ikon. Kemudahan sedemikian menjadikan hiperpautan sebagai sebahagian daripada reka bentuk dan pembangunan laman web.

Walau bagaimanapun, jika anda ingin memaparkan hiperpautan melalui JavaScript, anda akan mendapati bahawa tidak kira betapa sukarnya anda mencuba, adalah mustahil untuk mencapai matlamat ini. kenapa ni?

JavaScript sememangnya boleh mencipta dan mengedit hiperpautan, tetapi ia tidak boleh dipaparkan terus dalam halaman semasa. Sebabnya ialah JavaScript tidak mempunyai keupayaan untuk mengubah struktur dokumen DOM. DOM (Document Object Model) merujuk kepada model objek dokumen yang dibuat oleh penyemak imbas selepas memaparkan halaman WEB Ia menerangkan struktur hierarki halaman web dan hubungan antara elemen. Melalui JavaScript, kami boleh memanipulasi DOM secara dinamik untuk mencapai banyak kesan interaktif dinamik. Walau bagaimanapun, JavaScript hanya boleh melampirkan acara dan atribut pada elemen HTML dan tidak boleh menambah kandungan lain pada elemen HTML sedia ada.

Seseorang mungkin mencadangkan bahawa teknologi Ajax boleh menyelesaikan masalah ini. Ajax boleh mendapatkan data melalui komunikasi latar belakang dan mengemas kini kandungan halaman secara dinamik tanpa menyegarkan halaman web. Walaupun teknologi Ajax boleh mencapai kesan mengemas kini kandungan halaman secara dinamik, ia masih tidak dapat memaparkan hiperpautan secara langsung. Oleh kerana Ajax boleh mendapatkan data melalui komunikasi latar belakang, ia hanya boleh menjana unsur HTML secara dinamik melalui JavaScript selepas meminta data di latar belakang, dan menambahkan elemen ini ke lokasi yang ditentukan dalam dokumen.

Ia dapat dilihat bahawa JavaScript tidak boleh memaparkan hiperpautan secara langsung. Walau bagaimanapun, untuk pengalaman pengguna yang lebih baik, kami boleh menggunakan CSS, HTML dan JavaScript untuk mencapai kesan yang serupa dengan hiperpautan.

Pertama sekali, kita boleh menggunakan kelas pseudo untuk mencapai kesan seperti hiperpautan. Ini boleh dicapai dengan kod CSS berikut:

a.fake-link {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

Kod ini akan mencipta kelas yang dipanggil "pautan palsu" yang kelihatan seperti hiperpautan dengan garis bawah dan teks biru. Seterusnya, tindakan dilaksanakan melalui JavaScript dan mendengar acara Apabila kelas ini diklik, ia boleh melompat ke alamat URL yang ditentukan. Contohnya:

<p>请点击<a class="fake-link" href="#">此处</a>跳转到百度</p>

<script>
document.querySelector('.fake-link').addEventListener('click', function () {
  window.location.href = 'https://www.baidu.com';
});
</script>

Dengan JavaScript, kami menambahkan acara klik pada kelas pseudo dan menggunakan sifat window.location.href untuk mengubah hala pengguna ke alamat URL yang ditentukan (dalam kes ini, halaman utama Baidu). Dengan cara ini, kami mencapai kesan "seperti hyperlink".

Selain kelas pseudo, kami juga boleh mencipta dan mengedit elemen HTML melalui JavaScript dan menambahkannya pada dokumen. Sebagai contoh, kita boleh menggunakan JavaScript untuk mencipta elemen pautan dan menambahkannya ke lokasi yang ditentukan dalam dokumen. Pada masa yang sama, kami juga boleh menambah pemantauan acara untuk elemen pautan baharu ini untuk mencapai kesan lompatan dinamik yang kami mahukan. Contohnya:

<button id="btn-add-link">添加链接</button>

<script>
document.querySelector('#btn-add-link').addEventListener('click', function () {
  var link = document.createElement('a');
  link.href = 'https://www.baidu.com';
  link.target = '_blank';
  link.innerText = '百度';

  document.querySelector('body').appendChild(link);

  link.addEventListener('click', function (event) {
    event.preventDefault();
    window.location.href = link.href;
  });
});
</script>

Kod ini akan mencipta elemen butang dan menambah pendengar acara klik padanya. Apabila pengguna mengklik butang, JavaScript mencipta elemen pautan yang mengandungi alamat URL dan menambahkannya pada dokumen. Pada masa yang sama, kami menambahkan acara klik pada elemen pautan ini dan menggunakan kaedah preventDefault() untuk menghalang tingkah laku lalai pautan. Dalam pengendali acara klik, kami melaksanakan kesan lompatan yang diperlukan dan mengubah hala pengguna ke alamat URL yang ditentukan.

Melalui kaedah di atas, kita boleh mencapai kesan yang serupa dengan hiperpautan. Sudah tentu, kesan ini memerlukan penggunaan cara teknikal seperti JavaScript, CSS dan HTML. Walaupun begitu, mereka tidak boleh dibandingkan dengan makna dan nilai yang terkandung dalam hyperlink. Oleh itu, apabila membangunkan aplikasi web, kita masih harus menggunakan hiperpautan sebanyak mungkin untuk mencapai kesan lompatan yang diperlukan. Pada masa yang sama, kita juga harus menyedari sepenuhnya batasan dan kelemahan JavaScript, dan sentiasa meneroka cara teknikal baharu untuk membawa pengalaman yang lebih baik kepada pengguna.

Atas ialah kandungan terperinci javascript tidak boleh memaparkan hiperpautan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!