web-dev-qa-db-ja.com

JavaScriptを使用してページが存在するかどうかを確認する方法

リンクがあります：<a href="http://www.example.com">Hello</a>。

誰かがリンクをクリックすると、href-attributeが指すページが存在するかどうかをJavaScriptで確認したいと思います。ページが存在する場合、ブラウザはそのページ（この例では「www.example.com」）にリダイレクトしますが、ページが存在しない場合、ブラウザは別のURLにリダイレクトする必要があります。

javascripthyperlink
22
anish

ページが同じドメインに存在するかどうかによって異なります。外部ドメイン上のページが存在するかどうかを判断しようとすると、機能しません。ブラウザーのセキュリティにより、クロスドメインコールが防止されます（同一起源ポリシー）。

ただし、同じドメインでisである場合は、Buh Buhが推奨するようにjQueryを使用できます。 GETリクエストの代わりにHEADリクエストを行うことをお勧めしますが、デフォルトの$.ajax()メソッドは-$.ajax()メソッドがページ全体をダウンロードします。 HEADリクエストを実行すると、ヘッダーのみが返され、ページが存在するか（応答コード200-299）または存在しないか（応答コード400-499）が示されます。例：

$.ajax({
    type: 'HEAD',
    url: 'http://yoursite.com/page.html',
success: function() {
        // page exists
},
error: function() {
        // page does not exist
}
});

参照： http://api.jquery.com/jQuery.ajax/

62
fwielstra

かなり良い回避策は、プロキシすることです。サーバー側にアクセスできない場合は、YQLを使用できます。訪問： http://developer.yahoo.com/yql/console/

そこから次のようなことができます：select * from htmlstring where url="http://google.com"。そのページにある「RESTクエリ」をコードの開始点として使用できます。

完全なURLを受け入れ、YQLを使用してそのページが存在するかどうかを検出するコードを次に示します。

function isURLReal(fullyQualifiedURL) {
    var URL = encodeURIComponent(fullyQualifiedURL),
        dfd = $.Deferred(),
        checkURLPromise = $.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20htmlstring%20where%20url%3D%22' + URL + '%22&format=json');

    checkURLPromise
            .done(function(response) {
                // results should be null if the page 404s or the domain doesn't work
                if (response.query.results) { 
                    dfd.resolve(true);
                } else {
                    dfd.reject(false);
                }
            })
            .fail(function() {
                dfd.reject('failed');
            });
    });

    return dfd.promise();
}

// usage
isURLReal('http://google.com')
        .done(function(result) {
            // yes
        })
        .fail(function(result) {
            // no, or request failed
        });

2017年8月2日更新

「select * from htmlstring」は機能しますが、Yahooは「select * from html」を非推奨にしているようです。

7
Parris

XMLHttpRequestのドキュメントに基づく：

function returnStatus(req, status) {
  //console.log(req);
  if(status == 200) {
    console.log("The url is available");
    // send an event
  }
  else {
    console.log("The url returned status code " + status);
    // send a different event
  }
}

function fetchStatus(address) {
 var client = new XMLHttpRequest();
 client.onreadystatechange = function() {
  // in case of network errors this might not give reliable results
  if(this.readyState == 4)
   returnStatus(this, this.status);
 }
 client.open("HEAD", address);
 client.send();
}

fetchStatus("/");

ただし、これは現在のURLと同じドメイン内のURLに対してのみ機能します。外部サービスをpingできるようにしますか？もしそうなら、あなたはあなたのためにあなたの仕事をする簡単なスクリプトをサーバー上に作成し、javascriptを使用してそれを呼び出すことができます。

4
stef

webサーバーでカスタム404ハンドラーを作成しないのはなぜですか？これはおそらくこれを行うためのより「良い熊」の方法です。

2
tenfour

同じドメインにある場合は、xmlhttprequestオブジェクト[ajax]を使用してヘッドリクエストを作成し、ステータスコードを確認できます。

別のドメインにある場合は、サーバーに対してxmlhttprequestを実行し、呼び出しが行われているかどうかを確認します。

2
epascarello

JQueryを使用して満足している場合は、次のようなことができます。ページがロードされると、各リンクに対してajax呼び出しが行われます。次に、失敗したすべてのリンクのhrefを置き換えるだけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript">
<!--

$.fn.checkPageExists = function(defaultUrl){

    $.each(this, function(){

        var $link = $(this);

        $.ajax({
            url: $link.attr("href"),
            error: function(){
                $link.attr("href", defaultUrl);
            }
        });
    });
};

$(document).ready(function(){
    $("a").checkPageExists("default.html");
});
//-->
</script>
1
Buh Buh
$.ajax({
        url: "http://something/whatever.docx",
        method: "HEAD",
        statusCode: {
            404: function () {
                alert('not found');
            },
            200: function() {
            alert("foundfile exists");
        }
        }
    });
0
Tomas