用于检查 url 是否存在的 Javascript

Question

我用 JavaScript 编写了一个脚本来检查点击的链接是否有效 该脚本基本上执行以下操作

• 拦截所有链接点击
• 检查它们是否嵌套在a[href]标签下
• 检查网址中是否有特定文字，否则允许链接
• 检查该 URL 是否有效

如果 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.open 与 ajaxurl 以及 return false 部分有问题。但我只是还不能清楚地看到整个事情。我对 JavaScript 很陌生，你们能帮帮我吗？

编辑/结束问题 感谢@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;

Answer 1

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

此外，请记住，您无法在新标签页中打开该链接。 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;