測試是否可以從Web瀏覽器訪問URL，即確保不被代理服務器阻止

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';

哈基，但它似乎工作。 然而，它依賴於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

這有效，但必須設置超時！

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

Answer 5

Flickr和Facebook都有支持JSONP的API，因此跨域不是問題。 ie這是一個請求，只是回應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 reqest上可靠地設置錯誤處理程序，因此在調用成功回調之前顯示“加載”圖像。 設置一些超時，如果響應速度不夠快，將顯示錯誤消息。