Come impostare un icona barra degli indirizzi utilizzando JavaScript

July 5

Se non si aggiunge favicon alle pagine Web, il sito manca un suggestivo effetto visivo che richiede poco tempo per creare. Favicons sono le piccole immagini che a volte vedono accanto l'URL nella barra degli indirizzi del browser. Molti proprietari di siti usano un HTML semplice dichiarazione "link" per rendere le icone appaiono lì. JavaScript permette di creare favicon dinamiche che possono cambiare in base alle regole definite.

istruzione

1 Lanciate il vostro editor HTML o Blocco note e aprire un documento HTML.

2 Aggiungere il seguente codice JavaScript alla sezione "testa" del documento dopo la sezione "titolo":

<Script language = tipo "javascript" = "text / javascript">

var icon1 = "http://www.SomeSite1.com/favicon1.ico";

var icon2 = "http://www.SomeSite2.com/favicon2.ico";

var LinkItem = document.createElement ( 'link');

linkItem.rel = 'icona di collegamento';

linkItem.type = 'image / x-icona';

se (1 == 1)

linkItem.href = icon1;

altro

linkItem.href = icon2;

document.getElementsByTagName ( 'testa') [0] .appendChild (LinkItem);

</ Script>

Le prime due righe dopo il tag "script" impostare gli URL di favicon si intende utilizzare. Sostituire questi due URL con gli URL reali di favicon sul server Web o di qualsiasi altra posizione sul Web. Le prossime tre righe di codice creano un elemento di "link" e impostare alcune proprietà. Sostituire "http://www.SomeSite1.com/favicon1.ico" con l'URL di un file di icona sul server Web o l'URL di qualsiasi file di icona su Internet. Sostituire "http://www.SomeSite2.com/favicon2.ico" con l'URL di un altro file di icona.

3 Rivedere le righe rimanenti di codice. Questo codice utilizza operatori booleani per dimostrare la capacità del codice di scegliere una delle icone in base a una determinata condizione. In questo esempio, il codice verifica per vedere se è uguale a 1 1. In tal caso, si imposta il valore href dell'elemento link all'URL memorizzato nella icon1 variabile. In caso contrario, si imposta il valore href dell'elemento link all'URL memorizzato in icon2.

4 Salvare il documento e aprirlo nel browser. Poiché 1 è uguale a 1, il codice JavaScript viene visualizzata la favicon cui URL è uguale a quel valore memorizzato in icon1.

5 Tornare al documento. Sostituisci "se (1 == 1)" con "se (== 2)."

6 Salvare il documento e tornare al browser. Premere il tasto "F5" per aggiornare la pagina Web. Il codice JavaScript viene visualizzata l'altro favicon perché è stato modificato il "se" logica dichiarazione. Dal 1 non è uguale 2, il codice assegna l'URL del icon2 alla proprietà href dell'oggetto collegamento.

Consigli e avvertenze

  • Ci sono molti modi per utilizzare favicon dinamici in modo creativo. In questo esempio, il codice ha creato un test booleano artificiale controllando per vedere se è uguale a 1 1 o 1 è uguale a 2. Nella vita reale, è possibile verificare la presenza di condizioni significative. Per esempio, rilevando il giorno corrente, è possibile utilizzare la logica if-then-else per fare un'altra icona appare nella barra degli indirizzi quotidiano. Gli usi per la generazione dinamica favicon sono limitate solo dalla vostra immaginazione.