javascript hidden link

JavaScript Hidden Links

With the rapid development of the Internet, the number of links on the Internet is also increasing, and people often need to obtain the required information through links. However, some links are not necessarily friendly, such as being too long, too short, difficult to identify, and unsafe. At this time, we can use JavaScript to hide the link, making the link more beautiful, understandable and safe.

Hide long links

Sometimes we open a web page and find a long list of URLs, which is not only difficult to identify, but also destroys the beauty of the page. In order to solve this problem, we can hide long links and display them when needed. This method can effectively improve the aesthetics and reading experience of the page.

How to achieve it? First, add a tag to the HTML and set the href attribute to the long link that needs to be hidden. Then, add a 45a2772a6b6107b401db3c9b82c049c2 tag and put the text to be displayed in it. Finally, use JavaScript code to hide or show the link. The example is as follows:

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

With the above code, when "Click me" is clicked, the link "https://www.example.com/this-is-a-really-long-url-that-needs- to-be-hidden" will appear on the page.

Hide short link

Sometimes, we need to display a short link on the page instead of the entire URL. In this case, we can hide the full link and only display the short link text.

This method is similar to the above method, except that it does not require a link to an external website, so JavaScript can be used to generate a short link. For this method, we can use a service similar to TinyURL to shorten the long link into a shorter URL.

With the following code, we can use TinyURL to generate a short link and hide it:

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

On the page, we only need to display the text "Click me" when the user When clicked, the short link "https://tinyurl.com/xxx" will be displayed on the page.

Hide Safe Links

Sometimes, we need to protect our links so that they are not stolen or attacked by crawlers or other bad programs. In this case, we can use JavaScript’s encryption and decryption capabilities to hide the link.

When using JavaScript to encrypt a link, we can encrypt the link data so that external programs cannot decrypt the link and prevent malicious attacks.

The following is a simple example using JavaScript to encrypt the link:

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

In the above example, we use JavaScript's built-in btoa() and atob() functions to convert the link information Perform encryption and decryption. When the user clicks on the link, the link "https://www.example.com/this-is-a-secure-link" will be displayed.

Conclusion

In actual development, hiding links is a very useful technique that can improve the beauty, security and user experience of the page. It helps us keep our data safe from malicious programs and attacks. With the continuous development of JavaScript, we can use its various functions to hide and encrypt links, making our websites more secure and more beautiful.

The above is the detailed content of javascript hidden link. For more information, please follow other related articles on the PHP Chinese website!