Hvordan sette en adresse Bar symbol Bruke Javascript

Hvis du ikke legger Favicons til websidene, mangler nettstedet ditt en imponerende visuell effekt som tar litt tid å lage. Favicons er de små bildene du noen ganger ser ved siden av URL i adressefeltet i nettleseren. Mange nettsted eiere bruke en enkel HTML "link" statement å gjøre ikonene vises der. Javascript lar deg lage dynamiske favicons som kan endres i henhold til kriterier du definerer.

Bruksanvisning

1 Start din HTML editor eller Notisblokk og åpne et HTML-dokument.

2 Legg til følgende Javascript-kode til dokumentets "head" -seksjonen etter "title" -delen:

<Script language = "javascript" type = "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 = 'snarveisikonet';

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

if (1 == 1)

linkItem.href = icon1;

ellers

linkItem.href = icon2;

document.getElementsByTagName ( 'hode') [0] .appendChild (linkItem);

</ Script>

De to første linjene etter "script" tag sette nettadressene favicons du vil bruke. Erstatte disse to nettadresser med selve nettadressene favicon på webserveren eller andre steder på nettet. De neste tre linjer med kode lage en "link" element og sette noen egenskaper. Erstatt "http://www.SomeSite1.com/favicon1.ico" med nettadressen til et ikon fil på webserveren eller nettadressen til et ikon fil på Internett. Erstatt "http://www.SomeSite2.com/favicon2.ico" med nettadressen til et annet ikon fil.

3 Gjennomgå de resterende linjer med kode. Denne koden bruker boolske operatorer for å demonstrere koden evne til å velge ett av ikonene basert på en gitt tilstand. I dette eksempelet til kodeprogrammet om en lik 1. Hvis det er tilfelle, setter den linken varens href verdi til URL lagret i variabelen icon1. Ellers setter det lenken element href verdi til URL lagret i icon2.

4 Lagre dokumentet og åpne den i nettleseren din. Fordi en lik 1, vil Javascript-kode vise favorittikon hvis nettadressen er lik den verdien som er lagret i icon1.

5 Gå tilbake til dokumentet. Erstatt "if (1 == 1)" med "if (== 2)."

6 Lagre dokumentet, og gå tilbake til nettleseren din. Trykk "F5" for å oppdatere nettsiden. Javascript-koden vil vise andre favicon fordi du endret "hvis" statement logikk. Siden en ikke er lik 2, tildeler koden den icon2 URL til koblingen objektets href eiendom.

Hint

  • Det er mange måter å bruke dynamiske favicons kreativt. I dette eksempelet opprettet koden en kunstig boolsk test ved å sjekke for å se om en er lik 1 eller en lik 2. I det virkelige liv, kan du se etter meningsfulle forhold. For eksempel ved å registrere den aktuelle dagen, kan du bruke if-then-else logikk å gjøre et annet ikon vises i adressefeltet daglig. De bruker for dynamisk favicon generasjon er begrenset bare av fantasien.