Question

我有一个链接：<a href="http://www.example.com">Hello</a>。

当有人点击我希望通过JavaScript检查的链接时，如果href-attribute指向的页面存在与否。如果页面存在，浏览器将重定向到该页面（在此示例中为“www.example.com”），但如果页面不存在，则浏览器应重定向到另一个URL。

Answer 1

这取决于该页面是否存在于同一域中。如果您正在尝试确定外部域上的页面是否存在，则它将无法工作 - 浏览器安全性会阻止跨域调用（同源策略）。

如果在同一个域上，你可以像Buh Buh建议的那样使用jQuery。虽然我建议使用HEAD请求而不是默认$.ajax()方法的GET请求，但$.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/

Answer 2

一个很好的解决方法是代理。如果您无权访问服务器端，则可以使用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 html”，尽管“select * from htmlstring”确实有效。

Answer 3

基于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("/");

但这仅适用于与当前网址相同的域中的网址。您想要能够ping外部服务吗？如果是这样，您可以在服务器上创建一个简单的脚本，为您完成工作，并使用javascript来调用它。

Answer 4

如果它位于同一个域中，您可以使用xmlhttprequest对象[ajax]发出头请求并检查状态代码。

如果它在另一个域中，请向服务器发出xmlhttprequest并让它调用以查看它是否已启动。

Answer 5

为什么不在Web服务器上创建自定义404处理程序？这可能是更好的“好熊”方式。

Answer 6

如果你乐意使用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>

Answer 7

由于同源政策，您将无法使用ajax调用来对网站执行ping操作。最好的方法是使用图像，如果您知道所呼叫的网站有网站图标或某种图标可抓取，则可以使用html image标签并使用onerror事件。

示例：

function pingImgOnWebsite(url) {
    var img = document.createElement('img');
    img.style.visibility = 'hidden';
    img.style.position = 'fixed';
    img.src = url;
    img.onerror = continueBtn; // What to do on error function
    document.body.appendChild(img);
}

Answer 8

$.ajax({
        url: "http://something/whatever.docx",
        method: "HEAD",
        statusCode: {
            404: function () {
                alert('not found');
            },
            200: function() {
            alert("foundfile exists");
        }
        }
    });

Answer 9

另一种方法是使用PHP。

你可以添加

<?php
if (file_exists('/index.php')) 
{ 
$url = '/index.php';
} else {
$url = '/notindex.php';
}
?>

然后

<a href="<?php echo $url; ?>Link</a>

如何使用JavaScript检查页面是否存在

9 个答案:

2017年8月2日更新