Question

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

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

我认为XML http请求可以解决这个问题，但是我认为我遇到了跨域问题。我想我也可以设置代理服务图像，但我不想这样做;这个想法是flickr带来了带宽。

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

Answer 1

你可以试试这个......

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

Answer 2

工作示例：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>

Answer 3

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

如果你没有（ab-）使用外部主机来做你的东西会更好。如果你想要一个CDN，最好使用一个真正的...

Answer 4

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请求上可靠地设置错误处理程序，因此在调用成功回调之前显示“加载”图像。设置一些超时，如果响应恢复得不够快，将显示错误消息。

Answer 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'});

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

5 个答案:

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