检索“favicon.ico”时出现问题使用 AJAX HTTP 请求的图像

发布于 2024-12-01 11:29:29 字数 1334 浏览 0 评论 0原文

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

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

firebug consoleErrors

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

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

firebug consoleErrors

< strong>我可以做什么来完成我想做的事情（我主要指的是检查是否找到网站图标）？

如果我使用如下代码，它将工作，但它不检查网站图标在场：

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

原文

I am using Ruby on Rails v3.0.9 and jQuery 1.6. I am trying to retrieve and display the favicon image from some web sites.

For instance, in order to do that for a single web site I am using the following code:

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

I use the above code that performs an HTTP request in order to check if the favicon was found: if so (on success), it will replace the #facebook_favicon related to an HTML tag with the just found favicon.ico image otherwise it will replace that with an ERROR text.

However, when I load the page where the above JavaScript is placed and I inspect the Firebug Console I get the following:

firebug console errors

It means that the request was successfully performed (HTTP status codes are all 200, except for Gmail) but I can not display the icon image on success. Why? What is the problem?

I noted that in Firebug Responses are all blank, like this:

firebug console errors

What I can do to accomplish what I would like to make (I am referring mostly to check if a web site favicon is found)?

If I use code like the following it will work but it doesn't check the favicon presence:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯到世界奔溃 2024-12-08 11:29:29

您无法对与当前页面不在同一域/端口/协议上的 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/

You can't do XmlHttpRequests on URLs that are not on the same domain/port/protocol than the current page.

You can, however, check that an image exists by using an Image object and the onload and onerror events:

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

You can wrap this in a function:

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

And use it like this:

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

Test it here: http://jsfiddle.net/YpBsJ/2/

回复收藏 0 原文