Check if a link is working and hide/disable if it's broken using HTML/JavaScript

Question

So I am building my website using HTML/CSS. I would like to know what is the easiest way to check if a URL is availble?

For example, I have a table with a cell that shows a link to some 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>

In this cell, there is a link to some url. I want to show the link as URL (a href) only if http://{{ server.ServerName }}.ilo.lab.dba.co.il is working using http! (server.ServerName is a variable running in a for loop giving different DNS URLS) If it's not, I will show just a text, or not show it all...

I have found some functions in Javascript that return true and false, but I dont know how to call the function in my html. Like, I was thinking of doing if (link works) : show link with a href, else: show just the string...

Is it possible using Javascript function? If so, what's the function and how do I call it?

An example for a function I found:

How can I use and test it in my code? using href if it's true?

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

Answer 1

Assuming your page isn't hosted on http://10.0.5.1 , there's no general-purpose way to do this from the browser unless the target servers allow it, and separately it's probably not ideal to do so.

If the origin of your target pages isn't the same as the origin of the page, the Same Origin Policy kicks in and prevents your using ajax ( XMLHttpRequest , fetch ) to check the links. You could work around that if you can implement Cross-Origin Resource Sharing on all of the target servers, telling them to give your page access. But again: Requesting all of the resources linked on the page, even with a HEAD request, is probably not ideal.

You've tagged your question with PHP. You could certainly use PHP to check the links before returning the page. This question's answers show how to do a HEAD request for a URL.

You've also tagged Django, a Python server-side framework. You can do a HEAD request with Python, too; this search turned up this question and its answers.

Answer 2

Due your application backend is Django, I would recommend you using Python to check whether an http based url is available or not.

According to @TJ Crowder suggested, track of the links/questions to implement the mothod checkUrlAvailable(url) with a URL as the argument.

I've found the documentation of Built-in template tags and filters showing how to apply filters in Django template.

All in all, we can combine all together like the following:

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

The problem I am having is to check an non-existing server/url with Python. I will update this issue soon once it would be resolved.

To write checkUrlAvailable in Django template, take a look at the documentation . The idea is to build a customised filter to check the existence of a given URL. The pseudo code could be looked like the following but I argue to dive into these answers :

import requests

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

I just borrowed the snippet code from stackoverflow's link.

(to be updated soon)