2012-07-26 18 views
6

Tengo unos <img> que están vinculados (con el atributo src) a dominios URL cruzados que pueden necesitar redirigir a alguna otra URL de imagen. Necesito de alguna manera rastrear cada redirección que ocurre cuando el navegador solicita la URL original.Cómo escuchar los códigos de estado de redirección 301/302 en solicitudes de imágenes entre dominios?

Así, por ejemplo, si tengo:

<img src='http://www.something.com/redirect'/>

y http://www.something.com/redirect envió un encabezado personalizado location a http://something.com/pic.jpg, necesito saber acerca de ella. ¿Cómo puedo detectar una redirección en JS o jQuery en un <img>?

+0

No puede hacer esto con javascript ordinario. Necesitarás una extensión o un complemento. (Probablemente sea posible con una lista de usuarios, pero no tengo ganas de verificar en este momento). ¿Cuál es el verdadero propósito de este ejercicio? (Los medios pueden ser inviables, pero la locura aún podría lograrse.) –

+1

Sin servidor: imposible. Con servidor - trivial. Haga su elección: P – Esailija

+0

Eso es solo @Esailija, no puedo usar scripts del lado del servidor para hacer las solicitudes. Los necesito en la máquina del cliente, usando IP y cookies de los clientes. ¿Por qué? Debido a que algunas de las URL pueden estar vinculadas a un sitio que requiere un conjunto de cookies específico que estará ubicado en la máquina del cliente. Y obviamente no puedo obtener esas cookies del cliente cuando pertenecen a un dominio diferente (que tampoco tengo control). Si solo se permitiera el cruce de dominio 'AJAX'ing. Qué lástima. –

Respuesta

1

Si no está obligado a Internet Explorer 7 se puede utilizar una solución de cors. Eso le permitirá solicitar dominio cruzado sin las limitaciones de JSON-P (es decir, puede obtener códigos de estado).

Consulte https://developer.mozilla.org/en/http_access_control para obtener más información. Para una simple solicitud GET, debería estar bien, pero si necesita POSTAR, es posible que deba realizar una verificación previa de su solicitud.

1

No creo que sea posible (por supuesto que no soy un experto, pero eso es AFAIK), al menos no tan sencillo como uno podría pensar.

Esto es lo que creo que es lo más cerca que se puede llegar a lo que estás buscando, espero que te da algunas ideas

var req = new XMLHttpRequest(); 
$('img').each(function() { 
    req.open('GET', $(this).prop('src'), false); 
    req.send(null); 
    alert(req.status); 
}); 

dos lados hacia abajo:

  1. Sólo para imágenes en el mismo dominio
  2. tienes que pedir las imágenes dos veces (o puede hacer las solicitudes en primer lugar, a continuación, utilizan los resultados para mostrar las imágenes)
1
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<img id='img' src='' width='200' /> 
<script type='text/javascript'> 

/* our image */ 
var image = new Image(); 
$(image).load('yourimage.png', function(response, status, xhr) { 
    if (xhr.status == 200) { 
     // image loaded, now display the image 
     $('#img').attr('src','yourimage.png') 
    } else { 
     alert(xhr.status); 
    } 
}); 

</script> 
+1

Sin embargo, esto no funcionará para dominios cruzados. –

+0

¿No podría mover la imagen del lado del servidor de códigos de búsqueda (para que su img src se convierta en http://example.com/imagefetch.php?url=http://www.something.com/redirect y su página imagefetch.php usaría algo como cURL para buscar la imagen remota y hacer un seguimiento de los redireccionamientos (no hay idea por cierto si cURL puede hacer eso, pero se entiende la idea). Hay muchas razones de rendimiento por las cuales esta es una mala idea, pero si tuviera que lograrlo, esto podría funcionar –

+0

No quiero usar el servidor para esta tarea simple pero casi imposible. Pero gracias por la sugerencia. –

0

Cómo sobre el uso de Ajax para cargar el código de la imagen, la pseudo sin probar siguiente:

HTML:

<img id="img1" src="blank.gif"> 

JQuery:

GetImage("http://www.something.com/redirect"); 

function GetImage(url) 
{ 
    $.ajax({ 
     type: "GET", 
     url: url, 
     success: function(data, textStatus) { 
      if (data.redirect) { 
       // data.redirect contains the string URL to redirect to 
       ProcessLocationHeader(data); 
       GetImage(data.redirect); 
      } 
      else { 
       // No redirect means we have the correct image 
       $("#img1").src = url; 
      } 
     } 
    }); 
} 

Dado que el navegador va a almacenar en caché la imagen que ganó' t se carga desde el servidor twize.

+0

Esto no lo hará rk con dominios cruzados sin embargo. –

+0

Hmm ... Supongo que no entendí la pregunta correctamente. –

Cuestiones relacionadas