jquery - 使用 AJAX HTTP 请求检索 'favicon.ico' 图像时出现问题

Question

我正在使用 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 请求，以检查是否找到该图标:如果找到(成功)，它将替换 #facebook_favicon与刚刚找到的 favicon.ico 图像的 HTML 标记相关，否则它将用 ERROR 文本替换该图像。

但是，当我加载放置上述 JavaScript 的页面并检查 Firebug 控制台时，我得到以下信息:

这意味着请求已成功执行(HTTP状态代码均为200，Gmail除外)，但我无法在成功时显示图标图像。为什么？有什么问题吗？

我注意到 Firebug 响应中都是空白，如下所示:

我可以做什么来完成我想做的事情(我主要指的是检查是否找到网站图标)？

<小时/>

如果我使用如下代码，它会起作用，但不会检查图标是否存在:

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

Answer 1

您无法对与当前页面不在同一域/端口/协议(protocol)上的 URL 执行 XmlHttpRequest。

但是，您可以使用 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/