Heim > Web-Frontend > Front-End-Fragen und Antworten > Versteckter Javascript-Link

Versteckter Javascript-Link

王林
Freigeben: 2023-05-12 12:29:07
Original
1066 Leute haben es durchsucht

Versteckte JavaScript-Links

Mit der rasanten Entwicklung des Internets nimmt auch die Anzahl der Links im Internet zu, und Menschen müssen häufig über Links an die erforderlichen Informationen gelangen. Einige Links sind jedoch nicht unbedingt benutzerfreundlich, z. B. weil sie zu lang, zu kurz, schwer zu identifizieren und unsicher sind. Zu diesem Zeitpunkt können wir JavaScript verwenden, um den Link auszublenden, wodurch der Link schöner, verständlicher und sicherer wird.

Lange Links ausblenden

Manchmal öffnen wir eine Webseite und finden eine lange Liste von URLs, die nicht nur schwer zu identifizieren ist, sondern auch die Schönheit der Seite zerstört. Um dieses Problem zu lösen, können wir lange Links ausblenden und bei Bedarf anzeigen. Diese Methode kann die Ästhetik und das Leseerlebnis der Seite effektiv verbessern.

Wie erreicht man es? Fügen Sie zunächst ein -Tag zum HTML hinzu und legen Sie das href-Attribut auf den langen Link fest, der ausgeblendet werden soll. Fügen Sie dann ein -Tag hinzu und fügen Sie darin den anzuzeigenden Text ein. Verwenden Sie abschließend JavaScript-Code, um den Link auszublenden oder anzuzeigen. Das Beispiel sieht wie folgt aus:

<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>
Nach dem Login kopieren

Wenn mit dem obigen Code auf „Klick mich“ geklickt wird, wird der Link „https://www.example.com/this-is-a-really-long-url-that-needs“ angezeigt -to-be-hide“ wird auf der Seite angezeigt.

Kurzen Link ausblenden

Manchmal müssen wir auf der Seite einen kurzen Link anstelle der gesamten URL anzeigen. In diesem Fall können wir den vollständigen Link ausblenden und nur den kurzen Linktext anzeigen.

Diese Methode ähnelt der oben genannten Methode, erfordert jedoch keinen Link zu einer externen Website, sodass JavaScript zum Generieren eines kurzen Links verwendet werden kann. Für diese Methode können wir einen Dienst ähnlich wie TinyURL verwenden, um den langen Link in eine kürzere URL zu kürzen.

Mit dem folgenden Code können wir TinyURL verwenden, um einen kurzen Link zu generieren und ihn auszublenden:

<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>
Nach dem Login kopieren

Auf der Seite müssen wir nur den Text „Klicken Sie auf mich“ anzeigen. Wenn der Benutzer klickt, erscheint der kurze Link „https: //tinyurl.com/xxx“ wird auf der Seite angezeigt.

Sichere Links ausblenden

Manchmal müssen wir unsere Links schützen, damit sie nicht gestohlen oder von Crawlern oder anderen schädlichen Programmen angegriffen werden. In diesem Fall können wir die Ver- und Entschlüsselungsfunktionen von JavaScript nutzen, um den Link auszublenden.

Wenn wir JavaScript zum Verschlüsseln eines Links verwenden, können wir die Linkdaten verschlüsseln, sodass externe Programme den Link nicht entschlüsseln und böswillige Angriffe verhindern können.

Das Folgende ist ein einfaches Beispiel für die Verwendung von JavaScript zum Verschlüsseln von Links:

<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>
Nach dem Login kopieren

Im obigen Beispiel verwenden wir die integrierten Funktionen btoa() und atob() von JavaScript, um Linkinformationen zu verschlüsseln und zu entschlüsseln. Wenn der Benutzer auf den Link klickt, wird der Link „https://www.example.com/this-is-a-secure-link“ angezeigt.

Fazit

In der tatsächlichen Entwicklung ist das Ausblenden von Links eine sehr nützliche Technik, die die Schönheit, Sicherheit und Benutzererfahrung der Seite verbessern kann. Es hilft uns, unsere Daten vor Schadprogrammen und Angriffen zu schützen. Durch die kontinuierliche Weiterentwicklung von JavaScript können wir seine verschiedenen Funktionen nutzen, um Links zu verbergen und zu verschlüsseln und so unsere Websites sicherer und schöner zu machen.

Das obige ist der detaillierte Inhalt vonVersteckter Javascript-Link. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage