使用AJAX HTTP请求检索"favicon.ico"图像时出现问题 [英] Trouble on retrieving 'favicon.ico' images using AJAX HTTP requests
问题描述
我正在使用Ruby on Rails v3.0.9和jQuery 1.6.我正在尝试从某些网站检索并显示收藏夹图像.
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' />");
}
});
我使用上面的代码执行HTTP请求,以检查是否找到了favicon:如果这样(在成功上),它将用与HTML标记相关的#facebook_favicon
替换为刚刚找到的favicon.ico
图片,否则它将替换为ERROR
文字.
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.
但是,当我加载放置上述JavaScript的页面并检查Firebug控制台时,会得到以下信息:
However, when I load the page where the above JavaScript is placed and I inspect the Firebug Console I get the following:
这表示请求已成功执行(HTTP状态代码均为200
,但Gmail除外),但成功后我无法显示图标图像. 为什么?有什么问题吗?
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?
我注意到在Firebug中,响应都是空白的,就像这样:
I noted that in Firebug Responses are all blank, like this:
我该怎么做才能完成我想做的事情(我主要是指检查是否找到了网站收藏夹图标)?
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' />");
推荐答案
您不能对与当前页面不在同一域/端口/协议中的URL进行XmlHttpRequest.
You can't do XmlHttpRequests on URLs that are not on the same domain/port/protocol than the current page.
但是,您可以使用Image
对象以及onload和onerror事件来检查图像是否存在:
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;
}
并像这样使用它:
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/
这篇关于使用AJAX HTTP请求检索"favicon.ico"图像时出现问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!