如何用HTML/JavaScript检测URL可用性并动态展示链接或文本

首先得提一下你现有代码里的小问题：你写的同步XMLHttpRequest函数在现代浏览器里其实不太友好——它会阻塞页面渲染，甚至在一些严格的环境下会被直接禁止。所以咱们先把检测函数改成异步的，再来看怎么结合模板实现需求。

方案一：客户端异步检测（适合前端模板渲染场景） #

如果你的模板是在浏览器端渲染的（比如用Handlebars、EJS浏览器版，或者原生JS拼接DOM），可以按以下步骤来：

1. 替换成现代异步检测函数 #

用fetch和async/await实现异步检测，既不阻塞页面，也更符合现代JS规范：

async function urlExists(url) {
  try {
    // 用HEAD请求只获取响应头，比GET更轻量
    const response = await fetch(url, { method: 'HEAD' });
    // response.ok 等价于状态码在200-299之间，符合你的需求
    return response.ok;
  } catch (error) {
    // 网络错误、跨域、服务器无响应等情况，都返回false
    return false;
  }
}

2. 模板渲染占位符 #

先让模板把所有ILO列的内容渲染成文本，同时把要检测的URL存在data-*属性里，方便后续JS读取：

<table id="ServerTable">
  <thead>
    <tr>
      <th>服务器名称</th>
      <th>ILO</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里用你实际的模板语法循环，比如Handlebars的{{#each}}或EJS的<% %> -->
    {{#each servers}}
    <tr>
      <td>{{ ServerName }}</td>
      <td class="ilo-item" data-url="http://{{ ServerName }}.ilo.lab.dba.co.il">
        {{ ServerName }}.ilo.lab.dba.co.il
      </td>
    </tr>
    {{/each}}
  </tbody>
</table>

3. 页面加载后批量检测并替换 #

等页面DOM完全加载后，遍历所有ILO列的元素，逐个检测URL，根据结果替换成链接或保留文本：

// 等页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', async function() {
  // 获取所有ILO列的元素
  const iloItems = document.querySelectorAll('#ServerTable .ilo-item');

  // 逐个检测并更新内容
  for (const item of iloItems) {
    const targetUrl = item.dataset.url;
    const isAccessible = await urlExists(targetUrl);

    if (isAccessible) {
      // 如果可用，替换成可点击的链接
      const linkText = item.textContent.trim();
      item.innerHTML = `<a href="${targetUrl}" target="_blank">${linkText}</a>`;
    }
    // 不可用的话就保留原有文本，也可以改成隐藏：item.style.display = 'none'
  }
});

方案二：服务器端检测（推荐，避免跨域问题） #

如果你的模板是在服务器端渲染的（比如Node.js的EJS、Pug，或者PHP模板），更推荐在服务器端完成URL检测——因为客户端检测很容易遇到跨域问题（如果你的网站域名和ILO服务器域名不同，浏览器会阻止跨域请求）。

1. 服务器端检测逻辑（以Node.js为例） #

先用node-fetch或axios实现服务器端的检测函数，然后在渲染模板前给每个服务器数据添加可用性标识：

const fetch = require('node-fetch');

// 服务器端的URL检测函数
async function checkIloAvailability(serverName) {
  const iloUrl = `http://${serverName}.ilo.lab.dba.co.il`;
  try {
    const response = await fetch(iloUrl, { method: 'HEAD' });
    return { url: iloUrl, available: response.ok };
  } catch (err) {
    return { url: iloUrl, available: false };
  }
}

// 假设这是你的路由处理函数
app.get('/servers', async (req, res) => {
  // 从数据库或其他数据源获取服务器列表
  let serverList = await getServerData();

  // 并行检测所有ILO链接的可用性，效率更高
  serverList = await Promise.all(
    serverList.map(async server => {
      const iloInfo = await checkIloAvailability(server.ServerName);
      return { ...server, ...iloInfo };
    })
  );

  // 把处理好的数据传给模板渲染
  res.render('server-page', { servers: serverList });
});

2. 模板中直接判断渲染 #

在服务器端模板里，直接根据available字段决定渲染链接还是文本：

<table id="ServerTable">
  <thead>
    <tr>
      <th>服务器名称</th>
      <th>ILO</th>
    </tr>
  </thead>
  <tbody>
    <% servers.forEach(server => { %>
    <tr>
      <td><%= server.ServerName %></td>
      <td>
        <% if (server.available) { %>
          <a href="<%= server.url %>" target="_blank"><%= server.url %></a>
        <% } else { %>
          <%= server.url %> <!-- 或者不显示内容：<% /* 空内容 */ %> -->
        <% } %>
      </td>
    </tr>
    <% }) %>
  </tbody>
</table>

关键注意点 #

• 跨域限制：如果你的网站和ILO服务器不在同一个域名下，客户端检测几乎一定会失败（除非ILO服务器配置了CORS允许你的域名访问），这种情况下必须用服务器端检测。
• 性能优化：如果服务器数量很多，客户端逐个检测会比较慢，服务器端用Promise.all并行检测效率会高很多。
• 同步XHR的问题：你原来的同步请求函数会阻塞页面，导致用户卡顿，一定要换成异步实现。

内容的提问来源于stack exchange，提问作者EilonA