Проблемы с получением изображений favicon.ico с помощью HTTP-запросов AJAX. - PullRequest
Новая
       11

Проблемы с получением изображений favicon.ico с помощью HTTP-запросов AJAX.

1 голос
/ 27 августа 2011

Я использую Ruby on Rails v3.0.9 и jQuery 1.6. Я пытаюсь получить и отобразить изображение значка с некоторых веб-сайтов.

Например, чтобы сделать это для одного веб-сайта, я использую следующий код: 

$jQ.ajax({
  type:    'GET',
  url:     'http://www.facebook.com/favicon.ico',
  data:    '',
  error:   function(jqXHR, textStatus, errorThrown) {
    $jQ('#facebook_favicon').replaceWith('ERROR');
  },
  success: function(data, textStatus, jqXHR) {
    $jQ('#facebook_favicon').replaceWith("<img width='16px' height='16px' src='http://www.facebook.com/favicon.ico' />");
  }
});

Я использую приведенный выше код, который выполняет HTTP-запрос, чтобы проверить, был ли найден значок: если это так (при success ), он заменит #facebook_favicon, связанный с тегом HTML, на только что найденное favicon.ico изображение, в противном случае оно будет заменено текстом ERROR.

Однако, когда я загружаю страницу, на которой размещен вышеупомянутый JavaScript, и проверяю консоль Firebug, я получаю следующее:

firebug console errors

Это означает, что запрос был успешно выполнен (все коды состояния HTTP 200, кроме Gmail), но Я не могу отобразить изображение значка при успехе . Почему? В чем проблема?

Я заметил, что в Firebug все ответы пустые, например:

firebug console errors

Что я могу сделать, чтобы выполнить то, что я хотел бы сделать (я имею в виду, в основном, для проверки, найден ли сайт favicon) ?

Если я использую код, подобный следующему, он будет работать, но не проверяет наличие значка: 

$jQ('#facebook_favicon').replaceWith("<img width='16px' height='16px' src='http://www.facebook.com/favicon.ico' />");

Ответы [ 2 ]

6 голосов
/ 27 августа 2011

Вы не можете выполнять XmlHttpRequests для URL, которые не находятся в том же домене / порте / протоколе, что и текущая страница.

Однако вы можете проверить существование изображения с помощью объекта Image и событий onload и onerror: 

var img = new Image;
var src = 'http://www.facebook.com/favicon.ico';
img.onload = function() {
    // the image exists, display it
};
img.src = src;

Вы можете заключить это в функцию: 

function imageExists(src, callback) {
    var img = new Image;
    img.onload = function() {
        callback(src, true);
    };
    img.onerror = function() {
        callback(src, false);
    };
    img.src=src;
}

И используйте это так: 

imageExists('http://www.facebook.com/favicon.ico', function(src, exists) {
    if (exists) {
        $('body').append('<p>The image loaded correctly!</p>');
        $('<img>').attr('src', src).appendTo('body');
    } else {
        $('body').append('<p>oops, error</p>');
    }
});

Проверьте это здесь: http://jsfiddle.net/YpBsJ/2/

0 голосов
/ 27 августа 2011

Политика одинакового происхождения запрещает междоменные запросы

...