Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > pautan tersembunyi javascript

pautan tersembunyi javascript

王林
Lepaskan: 2023-05-12 12:29:07
asal
1067 orang telah melayarinya

Pautan Tersembunyi JavaScript

Dengan perkembangan pesat Internet, bilangan pautan di Internet juga semakin meningkat, dan orang ramai sering perlu menggunakan pautan untuk mendapatkan maklumat yang mereka perlukan. Walau bagaimanapun, sesetengah pautan tidak semestinya mesra, seperti terlalu panjang, terlalu pendek, sukar dikenal pasti dan tidak selamat. Pada masa ini, kami boleh menggunakan JavaScript untuk menyembunyikan pautan, menjadikan pautan lebih cantik, mudah difahami dan selamat.

Sembunyikan pautan panjang

Kadangkala kami membuka halaman web dan mencari senarai panjang URL, yang bukan sahaja sukar dikenal pasti, tetapi juga memusnahkan keindahan halaman. Untuk menyelesaikan masalah ini, kami boleh menyembunyikan pautan panjang dan memaparkannya apabila diperlukan. Kaedah ini boleh meningkatkan estetika dan pengalaman membaca halaman dengan berkesan.

Bagaimana untuk mencapainya? Mula-mula, tambahkan teg pada HTML dan tetapkan atribut href kepada pautan panjang yang perlu disembunyikan. Kemudian, tambahkan teg dan letakkan teks untuk dipaparkan di dalamnya. Akhir sekali, gunakan kod JavaScript untuk menyembunyikan atau menunjukkan pautan. Contohnya adalah seperti berikut:

<a href="https://www.example.com/this-is-a-really-long-url-that-needs-to-be-hidden">Click me</a>
<span id="link">This is the link</span>

<script>
var link = document.getElementById("link");
var hiddenLink = document.getElementsByTagName("a")[0].href;
link.onclick = function() {
  link.innerHTML = hiddenLink;  // 点击时显示链接
}
</script>
Salin selepas log masuk

Dengan kod di atas, apabila "Klik saya" diklik, pautan "https://www.example.com/this-is-a-really-long-url -yang-perlu- untuk-disembunyikan" akan muncul pada halaman.

Sembunyikan pautan pendek

Kadangkala, kita perlu memaparkan pautan pendek pada halaman dan bukannya keseluruhan URL. Dalam kes ini, kami boleh menyembunyikan pautan penuh dan hanya memaparkan teks pautan pendek.

Kaedah ini serupa dengan kaedah di atas, kecuali ia tidak memerlukan pautan untuk menghala ke tapak web luaran, jadi JavaScript boleh digunakan untuk menjana pautan pendek. Untuk pendekatan ini, kami boleh menggunakan perkhidmatan seperti TinyURL untuk memendekkan pautan panjang menjadi URL yang lebih pendek.

Dengan kod berikut, kami boleh menggunakan TinyURL untuk menjana pautan pendek dan menyembunyikannya:

<p>Here is the link: <a href="#" id="link">Click me</a></p>

<script>
var longurl = "https://www.example.com/this-is-a-really-long-url-that-needs-to-be-hidden";
var link = document.getElementById("link");
link.innerHTML = "Loading...";  // 显示“加载中”

// 利用TinyURL生成短链接
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://tinyurl.com/api-create.php?url=" + longurl, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var shorturl = xhr.responseText;
    link.innerHTML = shorturl;  // 将短链接显示出来
    link.href = longurl;        // 将链接指向原长链接
  }
};
xhr.send();
</script>
Salin selepas log masuk

Pada halaman, kami hanya perlu memaparkan teks "Klik saya" apabila pengguna Apabila diklik, pautan pendek "https://tinyurl.com/xxx" akan dipaparkan pada halaman.

Sembunyikan Pautan Selamat

Kadangkala, kita perlu melindungi pautan kita supaya ia tidak dicuri atau diserang oleh perangkak atau program lain yang tidak diingini. Dalam kes ini, kami boleh menggunakan keupayaan penyulitan dan penyahsulitan JavaScript untuk menyembunyikan pautan.

Apabila menggunakan JavaScript untuk menyulitkan pautan, kami boleh menyulitkan data pautan supaya program luaran tidak boleh menyahsulit pautan dan menghalang serangan berniat jahat.

Berikut ialah contoh mudah menggunakan JavaScript untuk menyulitkan pautan:

<p>Here is the link: <a href="#" id="link">Click me</a></p>

<script>
var link = document.getElementById("link");
var message = "https://www.example.com/this-is-a-secure-link";  // 需要加密的内容

// 将链接内容进行加密处理
var encrypted = btoa(message);
link.innerHTML = "Loading...";  // 显示“加载中”

// 解密链接内容
link.onclick = function() {
  var decrypted = atob(encrypted);
  link.innerHTML = decrypted;  // 显示链接
}
</script>
Salin selepas log masuk

Dalam contoh di atas, kami menggunakan fungsi btoa() dan atob() terbina dalam JavaScript untuk menukar pautan maklumat Lakukan penyulitan dan penyahsulitan. Apabila pengguna mengklik pada pautan, pautan "https://www.example.com/this-is-a-secure-link" akan dipaparkan.

Kesimpulan

Dalam pembangunan sebenar, menyembunyikan pautan ialah teknik yang sangat berguna yang boleh meningkatkan keindahan, keselamatan dan pengalaman pengguna halaman. Ia membantu kami memastikan data kami selamat daripada program dan serangan berniat jahat. Dengan pembangunan JavaScript yang berterusan, kami boleh menggunakan pelbagai fungsinya untuk menyembunyikan dan menyulitkan pautan, menjadikan tapak web kami lebih selamat dan cantik.

Atas ialah kandungan terperinci pautan tersembunyi javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan