Проверьте, доступен ли URL из веб-браузера, т.е. убедитесь, что прокси-сервер не заблокирован - PullRequest
Новая
       17

Проверьте, доступен ли URL из веб-браузера, т.е. убедитесь, что прокси-сервер не заблокирован

9 голосов
/ 11 апреля 2011

Я обслуживаю свой веб-сайт на mywebsite.com.Я размещаю изображения на flickr, поэтому все изображения загружаются в браузер пользователя через запросы на получение flickr.Многие пользователи моих веб-сайтов получают доступ к mywebsite.com из корпоративных сетей, которые блокируют доступ к flickr.com.Это означает, что пользователи получают очень раздражающие пустые заполнители вместо изображений.У меня та же проблема с кнопкой «Нравится» на Facebook.Это делает мой сайт очень непривлекательным для таких пользователей.

Есть ли способ запустить скрипт на стороне клиента, который будет проверять, доступны ли flickr.com, facebook.com и т. Д.Если нет, я мог бы изменить атрибут href изображения для загрузки из альтернативного источника или заменить стандартным изображением, объясняющим, что их сеть блокирует доступ.Я также мог бы удалить кнопку «Мне нравится в Facebook».

Я думал, что запрос XML http поможет, но потом я столкнусь с междоменными проблемами.Думаю, я мог бы также настроить прокси для обслуживания изображений, но я не хочу этого делать;Идея в том, что flickr принимает удар по пропускной способности.

TLDR: как определить, доступен ли flickr.com из браузера пользователя, с использованием технологии на стороне клиента.

Ответы [ 5 ]

9 голосов
/ 11 апреля 2011

Вы можете попробовать это ... 

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 .

3 голосов
/ 11 апреля 2011

Рабочий пример: 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>
1 голос
/ 11 апреля 2011

Для Facebook вы можете просто включить Facebook JS API и затем проверить, существует ли один из экспортируемых объектов / функций.

Было бы лучше, если бы вы этого не сделали () использовать внешние хосты для ваших вещей.Если вы хотите CDN, лучше используйте реальный ...

0 голосов
/ 13 ноября 2012

Это работает, но тайм-аут должен быть установлен! 

$.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'});
0 голосов
/ 11 апреля 2011

Flickr и Facebook имеют API-интерфейсы, поддерживающие JSONP, поэтому междоменная проблема не является проблемой. Т.е. вот запрос, который просто выводит некоторые фиктивные данные из API flickr. 

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

Вы не можете надежно установить обработчики ошибок в запросе jsonp, поэтому покажите изображение «загрузки», пока не будет вызван этот успешный обратный вызов. Установите время ожидания, которое будет отображать сообщение об ошибке, если ответ не будет возвращаться достаточно быстро.

...