Checking if a URL is broken in Javascript

Question

This question has been posted on Stack before, but none so specific as to what I'm trying to understand.

The simplest way to check if a URL is corrrect to send a http Head request. But how do you use that to specify the URL ?

I found this in a previous post :

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

But it doesn't seem to run in firebug for a few reasons.

My apologies ahead of time for being daft.

Is Firebug giving any errors? Hope you are doing XHR on your own server and not to another site (re. the same origin policy). I copy pasted the code in firebug and it works fine and returns true/false — Ravindra Sane, Oct 12 '10 at 16:14
I'm typing it in as `urlExists("http://www.stackoverflow.com/");` and it doesn't work. — Trip, Oct 13 '10 at 11:57

score 39 · Accepted Answer · answered Oct 12 '10 at 14:24

39

I'd recommend to use jQuery for correct cross-browser ajax requests:

function UrlExists(url, cb){
    jQuery.ajax({
        url:      url,
        dataType: 'text',
        type:     'GET',
        complete:  function(xhr){
            if(typeof cb === 'function')
               cb.apply(this, [xhr.status]);
        }
    });
}

Usage:

UrlExists('/path/script.pl', function(status){
    if(status === 200){
       // file was found
    }
    else if(status === 404){
       // 404 not found
    }
});

answered Oct 12 '10 at 14:24

jAndy

231,737
57
305
359

6

+1, but wouldn't you want to check for status codes other than 200 and 404? It could be a 500 or 304, etc – Neil N Oct 12 '10 at 14:26
Is your if statement in your complete missing a `{}` ? – Trip Oct 12 '10 at 14:37
@Neil: indeed, it should be extended to check for more status codes. @Trip: no, you can do one statement without `{}` – jAndy Oct 12 '10 at 14:53
5

Is this method still usable...? I'm getting a status 200 in firebug, but jQ status is 0 and reports a Cross Origin request error (my URL is in fact on another domain...but it's the 200 status I'm interested in, not any HTML) – Bean Feb 26 '15 at 00:04
1

What is `cb`? . – Valachio Jan 25 '18 at 03:07
`cb` is the callback function – Shoan Nov 05 '18 at 11:04

insign · Answer 2 · 2021-02-22T06:53:02.183

16

Modern, cross and short way

checkLink = async url => (await fetch(url)).ok

which is same of:

async checkLink(url) { return (await fetch(url)).ok }

which is same of:

async function checkLink(url) { return (await fetch(url)).ok }

which is same of:

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to their negative impact on the user experience.

Cross solution (old, deprecated)

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

edited Feb 22 '21 at 06:53

answered Nov 19 '20 at 19:29

insign

5,353
1
38
35

1

Could you suggest anything if I try to check the 3rd party site and get the error: `Access to fetch at 'https://3rd.party.site' from origin 'http://localhost:8080' has been blocked by CORS policy`? – MegaCasper Aug 11 '23 at 15:48
@MegaCasper this is a common problem but there is no relation with the question. Mostly site needs explicity allow you to access his sites. – insign Aug 28 '23 at 16:50

Checking if a URL is broken in Javascript

2 Answers2

Linked