Javascript 检查 url 是否存在

Javascript to check if an url exists

我在 JavaScript 中编写了一个脚本来检查点击的 link 是否有效 该脚本主要执行以下操作

如果 URL 404 或其他内容

,我希望阻止点击
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;

现在它不工作了,我感觉 ajaxurl init 和 reader.openajaxurl 有问题,也许 return false 部分也有问题。但我还不能清楚地看到整个事情。我是 JavaScript 的新手,你们能帮帮我吗?

EDIT/CLOSING 问题 感谢@Louy 和@epascarello,代码已完成。

// ==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;

正如@epascarello 所说,您不能在异步回调中使用 return。您稍后需要打开 link。

此外,请记住,您无法在新标签页中打开 link。 You'll have to open it in a new window or the same window. There's just no way around that.

如果您仍想这样做,方法如下:

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;