JavaScript/jQuery check broken links

I developed a small Javascript/jQuery program to access a collection of pdf files for internal use. And I wanted to have the information div of a pdf file highlighted if the file actually exist.

Is there a way to programmatically determine if a link to a file is broken? If so, How?

Any guid开发者_如何学Goe or suggestion is appropriated.

If the files are on the same domain, then you can use AJAX to test for their existence as Alex Sexton said; however, you should not use the GET method, just HEAD and then check the HTTP status for the expect value (200, or just less than 400).

Here's a simple method provided from a related question:

function urlExists(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.status < 400);
    }
  };
  xhr.open('HEAD', url);
  xhr.send();
}

urlExists(someUrl, function(exists) {
    console.log('"%s" exists?', someUrl, exists);
});

Issue is that JavaScript has the same origin policy so you can not grab content from another domain. This won't change by upvoting it (wondering about the 17 votes). I think you need it for external links, so it is impossible just with .js ...

If the files are not on an external website, you could try making an ajax request for each file. If it comes back as a failure, then you know it doesn't exist, otherwise, if it completes and/or takes longer than a given threshold to return, you can guess that it exists. It's not always perfect, but generally 'filenotfound' requests are quick.

var threshold   = 500,
    successFunc = function(){ console.log('It exists!'); };

var myXHR = $.ajax({
  url: $('#checkme').attr('href'),
  type: 'text',
  method: 'get',
  error: function() {
    console.log('file does not exist');
  },
  success: successFunc
});

setTimeout(function(){
  myXHR.abort();
  successFunc();
}, threshold);

You can $.ajax to it. If file does not exist you will get 404 error and then you can do whatever you need (UI-wise) in the error callback. It's up to you how to trigger the request (timer?) Of course if you also have ability to do some server-side coding you can do a single AJAX request - scan the directory and then return results as say JSON.

Like Sebastian says it is not possible due to the same origin policy. If the site can be published (temporarily) on a public domain you could use one of the link checker services out there. I am behind checkerr.org

As others have mentioned, because of JavaScript's same origin policy, simply using the function from the accepted answer does not work. A workaround to this is to use a proxy server. You don't have to use your own proxy for this, you can use this service for example: https://cors-escape.herokuapp.com (code here).

The code looks like this:

var proxyUrl = "https://cors-anywhere.herokuapp.com/";

function urlExists(url, callback) {
  var sameOriginURL = proxyUrl + url;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.status < 400);
    }
  };
  xhr.open('HEAD', sameOriginURL);
  xhr.send();
}

urlExists(someUrl, function(exists) {
  console.log('"%s" exists?', someUrl, exists);
});