web-dev-qa-db-ja.com

JavaScriptを使用して、iframeに表示する前にURLが存在するかどうかを検出する

動的なURLをiframe srcに渡すためにJavaScriptを使用しています。しかし、時々URLが存在しない場合、どのようにして事前に存在しないURLを検出し、404エラーでiframeを隠すことができますか？.

javascriptiframehttp-status-code-404
31
Mario

私の評判が低いため、Derek朕會功夫の答えについてコメントできませんでした。私はそのコードをそのまま試しましたが、うまくいきませんでした。 Derek朕會功夫のコードには3つの問題があります。

  1. 1つ目は、要求を非同期送信してそのプロパティ「ステータス」を変更する時間が、次の式-if（request.status === "404"）を実行するよりも遅いことです。したがって、最終的にrequest.statusは、インターネット帯域のためにステータス0（ゼロ）のままになり、ifのすぐ下のコードを達成できません。これを簡単に修正するには、ajaxリクエストのメソッドを開くときに「true」を「false」に変更します。これにより、（同期呼び出しのために）コードで短い（またはそうではない）ブロックが発生しますが、ifのテストに到達する前にリクエストのステータスが変更されます。

  2. 2番目は、ステータスが整数であることです。 '===' JavaScript比較演算子を使用すると、左側のオブジェクトが右側のオブジェクトと同一であるかどうかを比較しようとしています。これを機能させるには、2つの方法があります。

    • 404を囲む引用符を削除して、整数にします。
    • Javascriptの演算子「==」を使用して、2つのオブジェクトが類似しているかどうかをテストします。

  3. 3つ目は、オブジェクトXMLHttpRequestが新しいブラウザーでのみ動作することです（Firefox、ChromeおよびIE7 +）。 w3schools ajax

私のために本当に働いたコードは：

var request;
if(window.XMLHttpRequest)
    request = new XMLHttpRequest();
else
    request = new ActiveXObject("Microsoft.XMLHTTP");
request.open('GET', 'http://www.mozilla.org', false);
request.send(); // there will be a 'pause' here until the response to come.
// the object request will be actually modified
if (request.status === 404) {
    alert("The page you are trying to reach is not available.");
}
53
GPrimola

XHRを使用して、404で応答するかどうかを確認します。

var request = new XMLHttpRequest();  
request.open('GET', 'http://www.mozilla.org', true);
request.onreadystatechange = function(){
    if (request.readyState === 4){
        if (request.status === 404) {  
            alert("Oh no, it does not exist!");
        }  
    }
};
request.send();

ただし、同じOriginでのみ機能することに注意してください。別のホストの場合、 サーバー側の言語を使用 する必要があります。これを自分で解決する必要があります。

29
Derek 朕會功夫

私のシナリオではこれが機能することがわかりました。

JQuery 1.5で導入されたjqXHR.success（）、jqXHR.error（）、およびjqXHR.complete（）コールバックメソッドは、jQuery 1.8で非推奨になりました。最終的な削除のためにコードを準備するには、代わりにjqXHR.done（）、jqXHR.fail（）、およびjqXHR.always（）を使用します。

$.get("urlToCheck.com").done(function () {
  alert("success");
}).fail(function () {
   alert("failed.");
});
5
fragmint

AJAXでURLをテストし、ステータスコードを読み取ることができます-URLが同じドメインにある場合。

リモートドメインの場合は、 サーバースクリプトを使用 独自のドメインでリモートURLをチェックアウトできます。

2
Joseph

ページで簡単なGETを試してみることができます。200を戻した場合、ページが存在することを意味します。これを（jQueryを使用して）試してください。関数は、ページの読み込みが成功した場合の成功コールバック関数です。これは、ドメイン内のサイトでのみ機能し、XSSを防ぐことに注意してください。他のドメインはサーバー側で処理する必要があります

$.get(
   yourURL,
   function(data, textStatus, jqXHR) {
      //load the iframe here...
   }
);
1
Matt Dodge