Favicon differente in ogni scheda del browser in IE

Nella nostra applicazione abbiamo un meccanismo di sessione personalizzato che consente all'utente di avere sessioni diverse (ad esempio credenziali diverse) in ogni scheda del browser, anche se gli URL sono gli stessi. Questo meccanismo funziona alla grande in tutti i principali browser incluso IE (v11).Favicon differente in ogni scheda del browser in IE

Il problema

Vogliamo fornire ogni scheda del browser con differenti favicon (con colore differente) per indicare scheda che appartiene a quale sessione. Per fare questo, abbiamo creato diversi URL favicon seconda sessione utilizzando

<link rel='icon' href='url_to_favicon_session_id' type='image/ico'/>

E le grandi opere in Firefox e Chrome, tuttavia IE sembra condividere favicon tra tutte le schede che puntano allo stesso URL (l'icona è la stessa in ogni scheda , l'ordine di caricamento determina la favicon visibile in ogni scheda).

La domanda

Possiamo forzare IE in qualche modo di non condividere favicon attraverso le schede del browser con gli stessi URL?

Nota, la modifica dell'URL non è un'opzione qui.

Minimal Esempio di lavoro

seguito frammento di codice completo per riprodurre il problema (metterlo su un server web per l'esecuzione in IE con il supporto HTML5, aprire il file in molte schede dello stesso browser).

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <script type="text/javascript"> 

      var icons = [ 
       "http://google.com/images/google_favicon_128.png", 
       "https://assets-cdn.github.com/favicon.ico", 
       "https://www.microsoft.com/favicon.ico?v2", 
       "https://s.yimg.com/rz/l/favicon.ico", 
       "http://www.stackoverflow.com/favicon.ico", 
      ]; 

      var idx = localStorage["favicon"]; 
      if (idx === undefined) { 
       idx = 0; 
      } else { 
       idx = parseInt(idx); 
      } 

      localStorage["favicon"] = (idx + 1) % icons.length; 

      var link = document.createElement('link'); 
      link.type = 'image/x-icon'; 
      link.rel = 'icon'; 
      link.href = icons[idx]; 
      document.getElementsByTagName('head')[0].appendChild(link); 

     </script> 
    </head> 
    <body> 
     Open this page in multiple tabs. Favicon should be different in each tab. 
    </body> 
</html>

fonte

2014-12-11 tomash

Nell'esempio, il tag favicon viene generato tramite JavaScript. Questo è anche il caso nella vera applicazione? Se è così, posso immaginare che IE carichi favicon dalla sua cache (basata sull'URL) e non lo ricarichi quando lo JavaScript fa kick. In tal caso, potresti provare a renderlo lato server nel contenuto della pagina iniziale. – GolezTrol

No, nella favicon dell'applicazione reale è incorporato nel codice HTML.Tuttavia non importa per IE * come * la favicon è inclusa nella pagina, ma qual è l'URL * della * pagina. Inoltre non si tratta di un problema di cache, dal momento che (1) se si carica il codice che ho fornito in due URL diversi funziona come previsto, (2) anche se HTML è memorizzato nella cache, lo script caricherà diversi URL favicon, quindi la memorizzazione nella cache di file favicon non è rilevante qui. – tomash

Una soluzione potrebbe essere quella di aggiungere un parametro unico fittizio all'URL della pagina per ogni sessione (ad es. Http://yoursite.com/page?id= ). Questo costringerà IE11 a caricare una favicon diversa su ogni scheda. – dbcb

Nella mia esperienza, IE, insieme a quasi tutti gli altri browser, utilizza un meccanismo di cache separata dalla cache della pagina per evitare costante recupero di favicon. Ciò significa che le modifiche alla favicon possono essere imprevedibili a meno che l'URL non venga modificato e la cache per il dominio cancellata. L'unico modo affidabile che posso vedere intorno a questo è di aggiungere un ID univoco per identificare la scheda per ogni sessione forzando IE a mettere in cache separatamente l'icona di ogni sessione.

È possibile provare una variabile GET (ad esempio yoursite.com/page?sessionid), tuttavia, in base alla mia esperienza, IE memorizza ancora nella cache la favicon su una pagina nello stesso dominio indipendentemente dalla variabile GET. Infatti, Microsoft's documentation dice che è possibile utilizzare il tag link per ottenere pagine diverse con favicon diversi, tuttavia, spesso trovo che la cache di favicon di IE non si aggiorni anche se si modifica il tag link senza svuotare la cache. Inoltre, IE non visualizzerà affatto una favicon se tutto il caching è disattivato. E, sembra che in alcune versioni di IE, il tag link non abbia la precedenza su qualunque favicon si trovi nella posizione predefinita.

Ho avuto qualche successo con l'utilizzo di uno script di routing per ottenere richieste sulla pagina giusta e quindi accodare il sessionid come parte del percorso (ad esempio yoursite.com/page/sessionid), tuttavia. Ciò richiede un po 'di lavoro extra nello script di routing per ignorare il sessionid, ma è l'unica cosa, secondo la mia esperienza, che ha funzionato in modo semplice e affidabile per far sì che IE riconosca favicon differenti per sessioni diverse.

fonte

2015-01-03 20:21:21

Il modo con id di sessione in URL e script di routing è in realtà un modo in cui funziona il nostro meccanismo di sessione. Tuttavia, l'URL della pagina visibile all'utente (nella barra degli indirizzi) viene falsificato utilizzando l'API della cronologia. Non vogliamo che l'utente visualizzi l'id della sessione o lo copi da qualche parte (nota: nel nostro caso non si tratta di un problema di sicurezza, ma piuttosto di usabilità). Facendo questa domanda, speravo davvero che un membro dell'IO di IE ci rivelasse qualche altro fattore rispetto all'URL che influenza le favicon visualizzate o ci assicura che un fattore come questo non esiste. – tomash

Vedo. Ho fatto più ricerche possibili per cercare di trovare altri fattori, ma sembra essere una cache basata su url molto aggressiva. È un po 'strano che IE sia così preoccupato di non trasferire la favicon su ogni richiesta che essi facciano una cache così aggressiva per loro e tuttavia continua a inviare centinaia di byte non necessari nell'intestazione Accept e in altri posti. –

Favicon differente in ogni scheda del browser in IE

risposta

Problemi correlati