자바스크립트 숨겨진 링크

JavaScript Hidden Links

인터넷의 급속한 발전과 함께 인터넷상의 링크 수도 늘어나고 있으며, 사람들은 링크를 통해 필요한 정보를 얻어야 하는 경우가 많습니다. 그러나 일부 링크는 너무 길거나, 너무 짧거나, 식별하기 어렵고, 안전하지 않은 등 반드시 친숙하지는 않습니다. 이때 JavaScript를 사용하여 링크를 숨기고 링크를 더욱 아름답고 이해하기 쉽고 안전하게 만들 수 있습니다.

긴 링크 숨기기

때때로 우리는 웹페이지를 열고 긴 URL 목록을 발견하는데, 이는 식별하기 어려울 뿐만 아니라 페이지의 아름다움을 파괴합니다. 이 문제를 해결하기 위해 긴 링크를 숨기고 필요할 때 표시할 수 있습니다. 이 방법은 페이지의 미학과 읽기 경험을 효과적으로 향상시킬 수 있습니다.

어떻게 달성하나요? 먼저 HTML에 태그를 추가하고 숨겨야 하는 긴 링크에 href 속성을 설정합니다. 그런 다음 45a2772a6b6107b401db3c9b82c049c2 태그를 추가하고 표시할 텍스트를 입력하세요. 마지막으로 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>

위 코드에서 'Click me'를 클릭하면 'https://www.example.com/this-is-a-really-long-url-that-needs' 링크가 표시됩니다. -to-be- hide'라는 메시지가 페이지에 표시됩니다.

짧은 링크 숨기기

때로는 전체 URL 대신 페이지에 짧은 링크를 표시해야 할 때가 있습니다. 이 경우 전체 링크를 숨기고 짧은 링크 텍스트만 표시할 수 있습니다.

이 방법은 외부 웹사이트 링크가 필요하지 않다는 점을 제외하면 위 방법과 유사하므로 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>

페이지에서는 사용자가 클릭하면 "Click me"라는 텍스트만 표시하면 됩니다. //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의 지속적인 개발을 통해 우리는 JavaScript의 다양한 기능을 사용하여 링크를 숨기고 암호화하여 웹사이트를 더욱 안전하고 아름답게 만들 수 있습니다.

위 내용은 자바스크립트 숨겨진 링크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!