web-dev-qa-db-ja.com

JavaScript / jQueryが壊れたリンクをチェックする

内部で使用するPDFファイルのコレクションにアクセスするための小さなJavascript/jQueryプログラムを開発しました。そして、ファイルが実際に存在する場合、pdfファイルの情報divを強調表示したかったのです。

ファイルへのリンクが壊れているかどうかをプログラムで判断する方法はありますか？もしそうなら、どのように？

任意のガイドまたは提案が流用されます。

javascriptjquerybroken-links
26
NawaMan

ファイルが同じドメインにある場合は、AJAXを使用して、ファイルの存在を Alex Sexton とテストすることができます;ただし、GETメソッドを使用せず、HEADを使用して、HTTPステータスで期待値（200、または400未満）を確認してください。

関連する質問 から提供される簡単なメソッドを次に示します。

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);
});
57
Justin Johnson

問題は、JavaScriptが同じOriginポリシーを持っているため、別のドメインからコンテンツを取得できないことです。これは賛成しても変わりません（17票について疑問に思います）。私はあなたが外部リンクのためにそれを必要とすると思うので、.jsだけでは不可能です...

2
Sebastian Lasse

セバスチャンが言うように、それは同じ起源政策のために不可能です。サイトをパブリックドメインで（一時的に）公開できる場合は、そこにあるリンクチェッカーサービスの1つを使用できます。私は遅れています checkerr.org

1
zupa

ファイルが外部のWebサイトにない場合は、各ファイルに対してajaxリクエストを実行してみてください。失敗として戻ってきた場合は、存在しないことがわかります。それ以外の場合は、完了したり、所定のしきい値よりも時間がかかる場合は、存在していると推測できます。これは常に完璧なわけではありませんが、一般に「filenotfound」リクエストは迅速です。

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);
1
Alex Sexton

他の人が述べたように、JavaScriptの同じOriginポリシーのため、承認された回答からの関数を使用するだけでは機能しません。これに対する回避策は、プロキシサーバーを使用することです。これには独自のプロキシを使用する必要はありません。たとえば、次のサービスを使用できます。 https://cors-escape.herokuapp.com （code here ） 。

コードは次のようになります。

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);
});
0
Csaba

あなたはできる $.ajaxに。ファイルが存在しない場合は404エラーが発生し、エラーコールバックで必要な操作（UI単位）を実行できます。リクエストをトリガーする方法はあなた次第です（タイマー？）もちろん、サーバー側のコーディングも実行できる場合は、単一のAJAXリクエスト-ディレクトリをスキャンしてから返すことができます結果はJSONと言います。

0
Bostone