JavaScriptの隠しリンク

JavaScript の隠しリンク

インターネットの急速な発展に伴い、インターネット上のリンクの数も増加しており、多くの場合、リンクを通じて必要な情報を取得する必要があります。ただし、長すぎる、短すぎる、識別するのが難しい、安全でないなど、一部のリンクは必ずしもフレンドリーではありません。現時点では、JavaScript を使用してリンクを非表示にすることができ、リンクをより美しく、わかりやすく、安全なものにすることができます。

長いリンクを非表示にする

Web ページを開いて URL の長いリストが表示されることがありますが、これでは識別が難しいだけでなく、ページの美しさが損なわれてしまいます。この問題を解決するには、長いリンクを非表示にし、必要に応じて表示することができます。この方法により、ページの美しさと読書体験を効果的に向上させることができます。

それを達成するにはどうすればよいですか?まず、HTML に タグを追加し、非表示にする必要がある長いリンクに href 属性を設定します。次に、タグを追加し、その中に表示するテキストを記述します。最後に、JavaScript コードを使用してリンクを非表示または表示します。例は次のとおりです。

<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>

上記のコードでは、「クリックしてください」をクリックすると、リンク「https://www.example.com/this-is-a-really-long-url」が表示されます。 -that-needs-to-be-hidden」がページに表示されます。

短いリンクを非表示にする

場合によっては、URL 全体ではなく、ページに短いリンクを表示する必要があります。この場合、完全なリンクを非表示にして、短いリンク テキストのみを表示できます。

この方法は上記の方法と似ていますが、外部 Web サイトへのリンクが必要ないため、JavaScript を使用して短いリンクを生成できる点が異なります。この方法では、TinyURL と同様のサービスを使用して、長いリンクを短い URL に短縮できます。

次のコードでは、TinyURL を使用して短いリンクを生成し、それを非表示にすることができます:

<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>

ページでは、ユーザーが次の場合に「クリックしてください」というテキストを表示するだけで済みます。クリックすると、「https://tinyurl.com/xxx」というショートリンクがページに表示されます。

安全なリンクを非表示にする

リンクが盗まれたり、クローラーやその他の悪質なプログラムによって攻撃されたりしないように、リンクを保護する必要がある場合があります。この場合、JavaScript の暗号化および復号化機能を使用してリンクを非表示にすることができます。

JavaScript を使用してリンクを暗号化する場合、リンク データを暗号化することで、外部プログラムがリンクを復号化できなくなり、悪意のある攻撃を防ぐことができます。

次は、JavaScript を使用してリンクを暗号化する簡単な例です:

<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>

上の例では、JavaScript の組み込み btoa() 関数と atob() 関数を使用してリンク情報を変換します。暗号化と復号化を実行します。ユーザーがリンクをクリックすると、「https://www.example.com/this-is-a-secure-link」というリンクが表示されます。

結論

実際の開発において、リンクを非表示にすることは、ページの美しさ、セキュリティ、ユーザー エクスペリエンスを向上させることができる非常に便利なテクニックです。これは、悪意のあるプログラムや攻撃からデータを安全に保つのに役立ちます。 JavaScript の継続的な開発により、そのさまざまな機能を使用してリンクを非表示にしたり暗号化したりすることができ、Web サイトをより安全で美しいものにすることができます。

以上がJavaScriptの隠しリンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。