测试是否可以从 Web 浏览器访问 URL，即确保没有被代理服务器阻止答案

【问题标题】：Test if URL is accessible from web browser i.e. make sure not blocked by Proxy server测试是否可以从 Web 浏览器访问 URL，即确保没有被代理服务器阻止
【发布时间】：2011-08-03 01:31:03
【问题描述】：

我从 mywebsite.com 为我的网站提供服务。我在 flickr 上托管图像，因此所有图像都通过对 flickr 的获取请求加载到用户的浏览器中。我的许多网站用户从公司网络访问 mywebsite.com，这会阻止访问 flickr.com。这意味着用户会得到非常烦人的空白占位符而不是图像。 Facebook like 按钮也有同样的问题。这使我的网站看起来对这些用户没有吸引力。

有没有办法可以运行客户端脚本来检查是否可以访问 flickr.com、facebook.com 等。如果不是，我可以更改图像的 href 属性以从备用源加载，或者用标准图像替换，说明他们的网络正在阻止访问。我还可以删除 Facebook 的赞按钮。

我认为 XML http 请求可以解决问题，但我认为我会遇到跨域问题。我想我也可以设置一个代理来提供图像，但我不想这样做；这样做的想法是 flickr 会占用带宽。

TLDR：如何使用客户端技术确定是否可以从用户的浏览器访问 flickr.com。

【问题讨论】：

标签： javascript html scripting proxy

【解决方案1】：

对于 facebook，您可以简单地包含 Facebook JS API，然后测试它导出的对象/函数之一是否存在。

如果您不（ab-）使用外部主机来存放您的东西会更好。如果你想要一个 CDN，最好使用一个真实的......

【讨论】：

谢谢 - 我不认为我在滥用外部主机... flickr 社区指南说他们很乐意在您的网站上展示您的照片，只要您将图片链接回来。这就是我正在做的 - 它们是照片，而不是模板图形等，我同意这是我的问题。

【解决方案2】：

你可以试试这个……

var image = new Image();

image.onerror = function() {

   var images = document
                 .getElementById('flicker-images')
                 .getElementsByTagName('img');

   for (var i = 0, imagesLength = images.length; i < imagesLength; i++) {
        images[i].src = 'images/flickr_is_blocked.gif';
   }

};

image.src = 'http://flickr.com/favicon.ico';

Hacky，但它似乎工作。但是它依赖于favicon.ico 404ing 表示主站点。

jsFiddle.

【讨论】：

这看起来是一个很好的解决方案——我没想过这样做。因此，onerror 处理程序可以用“flickr_is_blocked.gif”替换我所有的图像 href 属性。今晚会试一试并反馈。谢谢。
@planetjones 是的，事实上，假设您的意思是src 属性，我会对其进行编辑以使其做到这一点：)
是的，就是这个！虽然我可能会从封闭的锚点中删除 href （或完全删除锚点！），因为单击它不会让用户走得太远！再次感谢 - 我认为这会很好地解决问题
这里有一个有趣的现象。在 Internet Explorer（至少 v8）中，如果您使用 image.src = 'flickr.com/favicon.ico';然后它会调用 onerror 处理程序，即使 favicon 是可访问的。在将 .ico 文件检索到图像中时，IE 似乎会引发错误。所以我的建议是始终检查真实的图像格式，即我只是指向我在 flickr 上的 .jpg
谢谢。确认上面的 jsFiddle 在最新版本的 FF(10)、Chrome(17) 和 IE(9) 中工作。

【解决方案3】：

Flickr 和 Facebook 都有支持 JSONP 的 API，因此跨域不是问题。即，这是一个仅从 flickr 的 API 回显一些虚拟数据的请求。

$.ajax({
  url: "http://www.flickr.com/services/rest/?jsoncallback=?",
  dataType: 'json',
  data: {method: "fickr.test.echo", format: "json", api_key: "02de950d65ec54a7a057af0e992de790"},
  success: callback
});

您无法在 jsonp 请求上可靠地设置错误处理程序，因此在调用成功回调之前显示“正在加载”图像。设置一些超时，如果响应没有足够快地返回，则会显示错误消息。

【讨论】：

【解决方案4】：

工作示例：http://jsfiddle.net/peeter/pW5wB/

JS：

$(document).ready(function() {

    var callbackOnSuccess = function(src) {
        alert("Successfully loaded " + src);
        return false;
    };
    var callbackOnFailure = function(src) {

        alert("Failed loading " + src);

        // Here you can do whatever you want with your flickr images. Lets change the src and alt tags
        $(".flickr").attr("src", "flickr_is_blocked.gif");
        $(".flickr").attr("alt", "Flicker is blocked");
        // Lets change the parents href to #
        $(".flickr").parent().removeAttr("href");
        return false;
    };

    checkAvailability("http://flickr.com/favicon.ico", callbackOnSuccess, callbackOnFailure);


});

function checkAvailability(src, callbackSuccess, callbackFailure) {
    $("<img/>").attr("src", src).load(function() {
        callbackSuccess(src);
    }).error(function() {
        callbackFailure(src);
    });
}

HTML：

<a href="http://flickr.com/favicon.ico">
    <img class="flickr" src="http://flickr.com/favicon.ico" alt="Flickr"/>
</a>

【讨论】：

感谢 Peeter - 我想这是一个很好的 JQuery 方式。我没有考虑做的是图像加载的错误处理程序。
你可以像load(callback)这样放置回调。
你是对的，alex，完成 :) @planetjones：我更新了答案，现在应该更清楚了。
@Peeter 对不起，我又来了：P。您最好使用removeAttr('href') 使a 元素处于非活动状态。
使用了 removeAttr （我一直认为 href 是必需的属性，但谷歌搜索证明我错了），但将包装回调添加回匿名函数中。出于某种原因，您提议的版本调用了这两个回调。

【解决方案5】：

这可行，但必须设置超时！

$.ajax({
    url: "http://example.com/ping.html",
    type: 'GET',
    dataType: 'jsonp',
    jsonpCallback: 'jsonCallback',
    timeout: 1000,
    cache: false,
    success: function(response) {
        console.log("SERVER UP!");
    },
    error: function(e) {
        console.log("SERVER DOWN!");
    }
});

ping.html 应该返回：

jsonCallback({response:'PONG'});

【讨论】：