-1

I have a HTML web site with pictures that are links to some external web-sites. The task for me is to show whether the external websites are down or not. That is, if the websites is possible to ping, I show a logo that represents the web-site. If the web-sites is down, not possible to ping, I show the logo with a red cross over it.

Is this possible to implement ?

emo
  • 137
  • 7
  • Could you please provide us with some code that you have written till now? – Pushkar Kathuria Sep 21 '16 at 06:50
  • It's fairly easy: You try to fetch the page using AJAX. On success, do thing A, on failure do thing B. This site is for issues with existing code, so please come back once you tried this yourself first. – Jonathan Weber Sep 21 '16 at 06:50
  • 3
    Try looking at this: http://stackoverflow.com/questions/4282151/is-it-possible-to-ping-a-server-from-javascript – Kingsthor Sep 21 '16 at 06:51
  • Duplicated? http://stackoverflow.com/questions/4282151/is-it-possible-to-ping-a-server-from-javascript – ezakto Sep 21 '16 at 06:51
  • 1
    @JonathanWeber How can they fetch the page given CORS limitations? –  Sep 21 '16 at 06:52
  • you could try loading the page in an iframe, and wait for the onload event, or wait for the onload event on an `` tag if that works better. –  Sep 21 '16 at 06:53
  • Hi, I only have HTML code, I have never done anything in Javascript or Ajax, so no existing code for that. Just needed some guidelines. I did see the examples you are linking, but that did not give me an answer, on how to implement to a HTML site. – emo Sep 21 '16 at 06:58
  • @torazaburo You are right, forgot about that. I think allowing the domain on the pinged pages through setting a PHP header for it would work, but this might be a problem if there is no access to those sites... – Jonathan Weber Sep 21 '16 at 07:04

2 Answers2

1

The following could work:

<img id="image" src="http://externalsite.com/foo.png">

const image = document.getElementById('image');
let loaded = false;

function swapImage() { image.src = '/not-available-image.png'; }

image.addEventListener('load', () => loaded = true);

setTimeout(() => {
  if (!loaded) swapImage();
  }
}, 3000);

This sets up an event listener on the load event, and when it fires sets the loaded variable to true. Then it also sets up a three-second timer, and when that fires, if the image hasn't been loaded yet, it swaps it to your non-available image. The only problem with this approach is that in the interim period between the retrieval of the original image failing, and the expiration of the timer, you will see the "broken image" icon.

  • thanks for your inputs. After some attempts I acomplished what I wanted, with inspiration in your logic :). I ended using the onerror event. – emo Sep 29 '16 at 12:31
0

I don't think it's possible to implement it.

When you want to "ping" a website, you would send ajax request to it.

If the URL is a public web API, it works. But if not, you would meet the cross origin issue.

Littlee
  • 2,584
  • 4
  • 20
  • 39