2012-07-26 10 views
6

Ho alcuni <img> che sono collegati (con l'attributo src) agli URL tra domini che potrebbero dover reindirizzare ad un altro URL di immagine. Devo in qualche modo tenere traccia di ogni reindirizzamento che avviene quando il browser richiede l'URL originale.Come ascoltare i codici di stato di reindirizzamento 301/302 nelle richieste di immagini tra domini?

Così, per esempio, se ho:

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

e http://www.something.com/redirect inviato una location intestazione personalizzata per http://something.com/pic.jpg, ho bisogno di sapere su di esso. Come posso rilevare un reindirizzamento in JS o jQuery su un <img>?

+0

Non è possibile farlo con javascript ordinario. Avrai bisogno di un'estensione o un plugin. (Probabilmente è possibile con un userscript, ma non ho voglia di controllare in questo momento). Qual è il vero scopo di questo esercizio? (Il mezzo potrebbe essere impraticabile, ma la follia potrebbe ancora essere raggiunta.) –

+1

Senza server - impossibile. Con il server - banale. Fai la tua scelta: P – Esailija

+0

Questo è solo @Esailija, non posso usare gli script lato server per fare le richieste. Ho bisogno che vengano eseguiti sul computer client, utilizzando i client IP e i cookie. Perché? Poiché alcuni URL possono essere collegati a un sito che richiede set di cookie specifici che si trovano sul computer client. E ovviamente non posso recuperare quei cookie dal client quando appartengono a un dominio diverso (di cui anch'io non ho alcun controllo). Se fosse consentito solo il dominio incrociato 'AJAX'ing. Che peccato. –

risposta

1

Se non si è vincolati a IE7 è possibile utilizzare un soluzione cors. Ciò ti consente di richiedere il dominio incrociato senza le limitazioni di JSON-P (ad esempio puoi ottenere i codici di stato).

Vedere https://developer.mozilla.org/en/http_access_control per ulteriori informazioni. Per una semplice richiesta GET dovresti stare bene, ma se hai bisogno di POST allora potresti dover preflight la tua richiesta.

1

Non penso che sia del tutto possibile (ovviamente non sono un esperto, ma è AFAIK), almeno non così semplice come si potrebbe pensare.

Ecco quello che penso sia il più vicino si può arrivare a quello che stai cercando, spero che ti dà qualche idea

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

Due lati negativi:

  1. Solo per le immagini nello stesso dominio.
  2. è necessario richiedere le immagini due volte (o si può fare le richieste, poi utilizzare i risultati per mostrare le immagini)
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

Tuttavia, questo non funzionerà con i domini incrociati. –

+0

Non puoi spostare l'immagine recuperando il lato del codice server (quindi il tuo img src diventerebbe http://example.com/imagefetch.php?url=http://www.something.com/redirect e la tua pagina imagefetch.php userebbe qualcosa come cURL per recuperare l'immagine remota e tenere traccia dei reindirizzamenti (nessuna idea se CURL è in grado di farlo, ma si ottiene l'idea). Ci sono molte ragioni per le prestazioni perché questa è una cattiva idea, ma se dovessi realizzarlo, questo potrebbe funzionare –

+0

Non voglio davvero usare il lato server per questo compito semplice ma quasi impossibile, ma grazie per il suggerimento –

0

ne dite di usare Ajax per caricare il codice dell'immagine, pseudo non testati seguente:

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

Poiché il browser memorizza nella cache l'immagine che ha vinto' t essere caricato dal server twize.

+0

Questo non funzionerà rk con domini incrociati però. –

+0

Hmm .. Immagino di non aver capito correttamente la domanda. –

Problemi correlati