Problemas para recuperar imágenes 'favicon.ico' usando solicitudes HTTP AJAX

Estoy usando Ruby on Rails v3.0.9 y jQuery 1.6. Estoy intentando recuperar y mostrar la imagen de favicon de algunos sitios web.

Por ejemplo, para hacer eso para un solo sitio web, estoy usando el siguiente código:

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

Utilizo el código anterior que realiza una solicitud HTTP para verificar si se encontró el favicon: si es así (en éxito), reemplazará el #facebook_favicon relacionado con una etiqueta HTML con el recién encontrado favicon.ico de lo contrario, la reemplazará con una ERROR texto.

Sin embargo, cuando cargo la página donde se coloca el JavaScript anterior e inspecciono la Consola Firebug, obtengo lo siguiente:

errores de la consola de firebug

Significa que la solicitud se realizó con éxito (Los códigos de estado HTTP son todos 200, excepto para Gmail) pero No puedo mostrar la imagen del icono en caso de éxito. ¿Por qué? ¿Cuál es el problema?

Noté que en Firebug las respuestas están todas en blanco, así:

errores de la consola de firebug

¿Qué puedo hacer para lograr lo que me gustaría hacer? (Me refiero principalmente a verificar si se encuentra un favicon de sitio web)?


Si utilizo un código como el siguiente, funcionará pero no verifica la presencia del favicon:

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

preguntado el 27 de agosto de 11 a las 14:08

2 Respuestas

No puede hacer XmlHttpRequests en URL que no estén en el mismo dominio / puerto / protocolo que la página actual.

Sin embargo, puede comprobar que existe una imagen utilizando un Image objeto y los eventos onload y onerror:

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

Puedes envolver esto en una función:

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

Y utilícelo así:

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

Pruébelo aquí: http://jsfiddle.net/YpBsJ/2/

Respondido 27 ago 11, 18:08

¿Quiere decir que el evento '.onload' se activará solo si se encontró el img? - Backo

sí, el evento onload se activará si la imagen se cargó correctamente - Arnaud Le Blanc

Gracias. También abrí una nueva pregunta relacionada para mejorar su código en las redirecciones. - Backo

Política del mismo origen prohíbe las solicitudes de dominio cruzado

Respondido 27 ago 11, 18:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.