Javascript to check if an url exists

Question

I've written a script in JavaScript to check if a clicked link is valid or not The script basically does the following

intercept all link clicks
check if they are nested under a[href] tags
check if it has a certain text in the url, else allow the link
check if that URL is working

I want the click to be blocked if the URL 404s or something

function iClicked(event) {
  var link = event.target;
  //go up the family tree until A tag
  while (link && link.tagName != 'A') {
    link = link.parentNode;
  }

  if (link) {
    var url = link.href;
    var ajaxurl = link.getAttribute('href');
    var needToCheck = url.indexOf('speed') != -1;
    //check if the url has the string 'speed' in it
    if (needToCheck) {
      var reader = new XMLHttpRequest();
      //asynchronous is true
      reader.open('get', ajaxurl, true);
      //check each time the ready state changes
      //to see if the object is ready
      reader.onreadystatechange = checkReadyState;

      function checkReadyState() {
        if (reader.readyState === 4) {
          //check to see whether request for the file failed or succeeded
          if ((reader.status == 200) || (reader.status === 0)) {
            //page exists - redirect to the clicked url
            document.location.href = url;

          } else {
            //if the url does not exist
            alert("No use going there!");
            return false;
          }
        }
      }
    }
  }
  return true;
}

//intercept link clicks
document.onclick = iClicked;

Now It's not working and I sense that something is wrong at ajaxurl init and the reader.open with ajaxurl and maybe the return false part as well. But I just can't see the whole thing clearly yet. I'm quite new to JavaScript, so can you guys help me out?

EDIT/CLOSING QUESTION Thanks to @Louy and @epascarello the code is complete.

// ==UserScript==
// @name        Check before Click
// @namespace   CheckbeforeClick
// @include     *
// @version     1
// @grant       none
// ==/UserScript==


function iClicked(event) {
    var link = event.target;
    //go up the family tree until A tag
    while (link && link.tagName != 'A') {
        link = link.parentNode;
    }

    if (!link) return true;

    var url = link.href;
    var ajaxurl = link.getAttribute('href');
    //change the following to apply on other links, maybe regex
    var needToCheck = url.indexOf('speed') != -1;
    //check if the url has the string 'speed' in it
    if (!needToCheck) return true;

    var reader = new XMLHttpRequest();
    //asynchronous is true
    reader.open('get', ajaxurl, true);
    //check each time the ready state changes
    //to see if the object is ready
    reader.onreadystatechange = checkReadyState;
    function checkReadyState() {
      if (reader.readyState === 4) {
        //check to see whether request for the file failed or succeeded
        if ((reader.status == 200) || (reader.status === 0)) {
          //page exists - redirect to the clicked url
          document.location.href = url;
          // or 
          // window.open(url)
        } else {
          //if the url does not exist
          alert("No use going there!");
        }
      }
    }
    reader.send(null);

    return false;
}

//intercept link clicks
document.onclick = iClicked;

"check if that URL is working" probably no way to do that easily in Javascript. [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) won't let you. You need a proxy server or something. — Louay Alakkad, Dec 29 '15 at 19:50
You can not return true or false from an asynchronous method. — epascarello, Dec 29 '15 at 19:56
@Louy the urls are in the samesubdomain. and the actual href tag will always have relative urls. thats what i'm getting at `var ajaxurl` — mystupidstory, Dec 30 '15 at 05:42
Return false and follow the link inside of the success callback. Either set window location or unbind the click event and then click the link. — epascarello, Dec 30 '15 at 05:51

score 1 · Accepted Answer · edited May 23 '17 at 11:54

So as @epascarello said you can't use return in an async callback. You'll need to open the link later.

Moreover, keep in mind that you can't open the link in a new tab. You'll have to open it in a new window or the same window. There's just no way around that.

If you still want to do that, here's how:

if (!link) return true;

var url = link.href;
var ajaxurl = link.getAttribute('href');
var needToCheck = url.indexOf('speed') != -1;
//check if the url has the string 'speed' in it
if (!needToCheck) return true;

var reader = new XMLHttpRequest();
//asynchronous is true
reader.open('get', ajaxurl, true);
//check each time the ready state changes
//to see if the object is ready
reader.onreadystatechange = checkReadyState;

function checkReadyState() {
  if (reader.readyState === 4) {
    //check to see whether request for the file failed or succeeded
    if ((reader.status == 200) || (reader.status === 0)) {
      //page exists - redirect to the clicked url
      document.location.href = url;
      // or 
      // window.open(url)
    } else {
      //if the url does not exist
      alert("No use going there!");
    }
  }
}

return false;

That worked man, thanks! BTW you, like me, forgot to put in the actual `reader.send` part :D — mystupidstory, Dec 30 '15 at 14:19

Javascript to check if an url exists

1 Answers1