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

Test if URL is accessible from web browser i.e. make sure not blocked by Proxy server

本文关键字：确保 代理服务器 访问 是否 URL 浏览器 web 测试      更新时间：2023-09-26

我从mywebsite.com服务我的网站。我在flickr上托管图片，所以所有图片都是通过对flickr的get请求加载到用户浏览器中的。我的许多网站用户都是从企业网络访问mywebsite.com的，而企业网络则屏蔽了对flickr.com的访问。这意味着用户得到的是非常烦人的空白占位符，而不是图像。我在Facebook上点赞按钮也遇到了同样的问题。这使得我的网站对这样的用户看起来非常没有吸引力。

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

我以为XML http请求就能解决问题，但后来我想我遇到了跨域问题。我想我也可以设置一个代理来提供图像，但我不想这样做;这样做的目的是让flickr承受带宽的冲击。

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

你可以试试这个…

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 .

示例: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>

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

如果你不(ab-)使用外部主机为您的东西会更好。如果你想要一个CDN，最好使用一个真正的…

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请求上可靠地设置错误处理程序，所以显示一个"正在加载"的图像，直到成功回调被调用。设置一些超时时间，如果响应没有足够快地返回，将显示错误消息。

可以，但是必须设置timeout !

$.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'});
相关文章：