检查链接是否正常工作，如果使用 HTML/JavaScript 损坏，则隐藏/禁用

Question

所以我正在使用 HTML/CSS 构建我的网站。 我想知道检查 URL 是否可用的最简单方法是什么？

例如，我有一个表格，其中包含一个显示指向某个 URL 的链接的单元格 -

   <table class="table table-hover table-bordered table-condensed" cellspacing="0" width="1300" id="ServerTable">
<thead>

  <tr>
    <th><center> #</center></th>
    <th width="100%"><center>  Server Name </center></th>
    <th><center>  Owner </center></th>
    <th><center>  Project </center></th>
    <th width="100%"><center>  Description </center></th>
    <th width="100%"><center>  IP Address </center></th>
    <th width="100%"><center> ILO </center></th>
    <th><center>  Rack </center></th>
    <th><center>  Status </center></th>
    <th><center>  Actions   </center></th>


    </tr>
    </thead>
<tbody>

            {% for server in posts %}


    <tr>
      <div class ="server">
        <td></td>
        <td width="100%"><center>{{ server.ServerName }}</center></td>
        <td width="100%"><center>{{ server.Owner }}</center></td>
        <td width="100%"><center>{{ server.Project }}</center></td>
        <td width="100%"><center>{{ server.Description }}</center></td>
        <td width="100%"><center>{{ server.IP }}</center></td>
        <td width="100%"><center><a href="//{{ server.ServerName }}.ilo.lab.dba.co.il"> http://{{ server.ServerName }}.ilo.lab.dba.co.il </a></center></td>
        <td width="100%"><center>{{ server.Rack }}</center></td>
        <td width="100%"><h4><span class="badge badge-success">Online</span></h4></td></center>

在这个单元格中，有一个指向某个 url 的链接。 如果 http://{{ server.ServerName }}.ilo.lab.dba.co.il 正在使用 http，我想将链接显示为 URL（a href）only！ （server.ServerName 是一个在 for 循环中运行的变量，提供不同的 DNS URL） 如果不是，我将只显示一个文本，或者不显示全部...

我在 Javascript 中找到了一些返回 true 和 false 的函数，但我不知道如何在我的 html 中调用该函数。 就像，我正在考虑做 if (link works) : show link with a href, else: show just the string...

是否可以使用Javascript函数？如果是这样，函数是什么以及如何调用它？

我找到的函数示例：

如何在我的代码中使用和测试它？如果是真的使用href？

  function UrlExists(url)
    {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status==200;
    }

Answer 1

假设您的页面不是托管在 http://10.0.5.1 上，除非目标服务器允许，否则没有通用的方法可以从浏览器执行此操作，而且单独这样做可能并不理想。

如果您的目标页面的来源与页面的来源不同，Same Origin Policy 会启动并阻止您使用 ajax（XMLHttpRequest、fetch）检查链接。如果您可以在所有目标服务器上实现Cross-Origin Resource Sharing，您可以解决这个问题，告诉他们授予您的页面访问权限。但同样：请求页面上链接的所有资源，即使是 HEAD 请求，也可能并不理想。

您已使用 PHP 标记您的问题。您当然可以在返回页面之前使用 PHP 检查链接。 This question's answers 展示如何对 URL 进行 HEAD 请求。

您还标记了 Django，这是一个 Python 服务器端框架。你也可以用 Python 发出 HEAD 请求； this search 出现了 this question 及其答案。

Answer 2

由于您的应用程序后端是 Django，我建议您使用 Python 来检查基于 http 的 url 是否可用。

根据@T。 J. Crowder 建议，跟踪链接/问题以实现 checkUrlAvailable(url) 方法，并将 URL 作为参数。

我找到了Built-in template tags and filters 的文档，展示了如何在 Django 模板中应用过滤器。

总而言之，我们可以像下面这样组合在一起：

<td width="100%"><center>
   {% if checkUrlAvailable(server) is True %}
      <a href="//{{ server.ServerName }}.ilo.lab.dba.co.il"> http://{{ server.ServerName }}.ilo.lab.dba.co.il </a>
   {% else %}
      http://{{ server.ServerName }}.ilo.lab.dba.co.il
   {% endif %}
</center></td>

我遇到的问题是使用 Python 检查不存在的服务器/url。一旦问题得到解决，我会尽快更新。

要在 Django 模板中编写 checkUrlAvailable，请查看 documentation。这个想法是构建一个自定义过滤器来检查给定 URL 的存在。伪代码可能如下所示，但我主张深入研究这些answers：

import requests

def checkUrlAvailable(url):
    resp = requests.head(url)
    if resp.status_code == 200:
       return True
    else
       return False

我刚刚从 stackoverflow 的链接中借用了 sn-p 代码。

（即将更新）