链接对 HTML 作出反应

HTML中的链接是一种在页面上与另一个资源建立联系的元素。在网站中，链接可能指向其他页面、文档、图片、音频或视频等。在本文中，我们将介绍如何让HTML中的链接实现交互和响应。

实现链接交互

要让链接实现交互，我们需要使用JavaScript。我们可以为链接添加事件监听器，以便在用户单击链接时执行某些操作。例如，可以使用以下代码段使链接打开新窗口：

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault();   // 防止链接默认行为
  window.open(link.href, '_blank');   // 在新窗口中打开链接
});

在上面的代码中，我们使用addEventListener函数为链接添加了一个单击事件监听器。当链接被单击时，我们调用了event.preventDefault()，它可以防止链接默认的行为，这里是跳转到链接指向的地址。然后利用window.open()方法打开一个新窗口，并输入了链接的目标URL。执行这段代码后，用户可以在新窗口中访问链接的目标网页，而不会丢失当前页面。

实现链接响应

当链接指向的资源不可用或不存在时，我们希望链接可以显示一些有用的提示信息，告知用户链接无法正常访问。HTML中的链接可以通过href属性指向任何可访问的URL，而JavaScript则可以轻松地检测链接指向的资源是否可用。

以下是一个检测链接是否可用的函数：

function isLinkActive(link) {
  return fetch(link.href)
    .then(response => {
      if (response.ok) {
        return Promise.resolve(`${link.href} is active.`);
      } else {
        return Promise.reject(`${link.href} is broken.`);
      }
    })
    .catch(error => Promise.reject(`${link.href} is broken.`));
}

上述函数接受一个链接作为输入，并返回一个Promise，以便进行进一步的处理。该函数使用fetch()函数从指向的URL获取响应，然后检查响应的状态码。如果响应状态码为200，则说明链接指向的资源可用，我们将字符串${link.href} is active.作为Promise的解析值返回。否则，我们将字符串${link.href} is broken.作为Promise的拒绝值返回。

为了在页面上处理链接无法访问的情况，我们可以为链接添加一个错误处理程序。例如，以下代码段将在用户单击链接时检测该链接是否可用，如果不可用，则通知用户链接无法正常使用：

const link = document.querySelector('a');

link.addEventListener('click', event => {
  event.preventDefault();
  isLinkActive(link).then(
    message => console.log(message),    // 链接可用
    error => alert(error)    // 链接不可用
  );
});

在上面的代码中，我们暂时阻止了链接的默认行为，并使用isLinkActive()函数检测链接是否可用。如果链接正常，则在控制台中记录字符串${link.href} is active.；否则，我们弹出一个警告框，告知用户此链接无法正常使用。

结论

在本文中，我们介绍了如何利用JavaScript为HTML中的链接添加交互和响应。通过添加事件监听器和错误处理程序，我们可以实现用户友好的链接处理，不仅可以提高用户满意度，还有助于提高网站的可用性。