| Frames By Kevin Yank ([email protected]) 27 September 1998 |
 |
| Frames By Kevin Yank ([email protected]) 27 September 1998 |
|
Avanserte Emner
De av dere som er interessert i et par nyttige triks, finner det i denne seksjonen. Det eneste kravet er at dere m� ha forst�else for hvordan frames fungerer, og det skal dere gj�re n�, etter de to foreg�ende enhetene. Du b�r ogs� ha en liten peiling p� enkel programmering, men kravene til dette er s� sm� at det burde g� greit for alle med litt lyst og velvilje. Programmeringen det dreier seg om, er enkel bruk av JavaScript. Begge disse teknikkene krever en viss forst�else av JavaScript, men jeg skal forklare alt fra grunnen av. Enhver med en urliten forst�else av programmeringsbegrep burde greie dette uten problemer. Du har forberedt deg godt p� site'n du skal sette opp. Notater og skisser ligger str�dd omkring, og du griper tak i musa for endelig � realisere verket. HotDog Pro startes opp, og du er klar til innsats. Da sl�r det deg at du har oversett en vesentlig ting. For � f� layouten din til � virke m� du f� en link til � endre innholdet i to frames. Hvordan i alle dager skal du f� til det? Er alt h�pl�st? Selvsagt ikke! Bruk JavaScript. Ved � bruke dette enkle lille spr�ket kan vi endre linken din fra kun � laste en fil inn i en ramme, til i stedet � starte opp et lite JavaScript som vi har definert i HEAD delen av HTML fila di. Denne lille biten JavaScript kalles en funksjon, og den vil utf�re arbeidet med � endre flere frames i en vending. Mer f�lger! F�r vi g�r videre b�r jeg understreke at den teknikken som beskrives her, fungerer ok for alle Netscape browsere, samt for Explorer 4 og 5. Brukere av Explorer 3.0 ligger d�rligere an i l�ypa, s� v�r sikker p� at du vet hva du gj�r. (komm.: Personlig vil jeg tro at sv�rt f� har s� gamle browsere i dag) Dersom JavaScript er noe helt nytt for deg, la meg kort forklare hvordan dette fine lille spr�ket funker. JavaScript beskrives vanligvis som et objekt-orientert programmeringsspr�k. Kort sagt betyr dette at alt oppfattes som objekter. Web-browseren din er et objekt, browser vinduet er et objekt, bildene p� websidene dine er objekter, og dine frames er objekter! Den fine tingen med objekter er at du kan endre p� dem. Ting som du kan endre for et bestemt objekt kalles for det objektets egenskaper (properties). En av egenskapene til objektet som representer browser vinduet ( window objektet) er dokumentet. Det viser seg at document selv er et objekt (sa jeg ikke at alt var objekter?). En av egenskapene til dokument objektet er dens lokalisering. Denne lokaliseringen er URL'en til dokumentet som i �yeblikket fremvises av window objektet. "Hva har dette � gj�re med mitt problem med multi-frame linker," sp�r du kanskje? Vel, som jeg allerede har sagt s� kan du endre egenskapene til objektene. S�, hva hender om du endrer lokasjonsegenskapen til dokumentet til en av dine frames? Vel, framen laster inn den nye URL'en, selvsagt. Og i JavaScript er det ingenting som hindrer deg i � endre s� mange egenskaper p� s� mange objekter som du �nsker! La meg begynne med � vise deg JavaScriptet som brukes til � endre innholdet i en enkelt frame.
parent.frames["name"].document.location = "newdoc.html";
name er navnet p� framen du �nsker � endre, og newdoc.html er filnavnet, eller URL'en, til det nye dokumentet som skal lastes inn i framen. Dette er JavaScript m�ten � si: I parent vinduet i frame'en kalt "name", skal documentets lokalisering (URL) endres til "newdoc.html". Okey, n� har du f�tt demonstrert en fancy m�te � gj�re noe p� som du allerede kjenner til. Hvordan endrer jeg s� lokaliseringen for mer enn en frame? Svaret er at du bare gjentar den JavaScript linja for hver frame du �nsker � endre.
parent.frames["frame1"].document.location = "newdoc1.html";
Og, hvor f�rer det oss? Som allerede nevnt vil hver av linkene aktivisere en liten bit JavaScript kalt en function. Du definerer funksjonene i headingen til HTML fila, inne i et <SCRIPT> tag.
<HTML>
I eksemplet ovenfor har vi definert en JavaScript funksjon kalt speciallink(), som endrer innholdet i to frames. Alt som gjenst�r, er � aktivisere den funksjonen n�r brukeren klikker den korrekte linken. Det eneste som trengs, er en fancy utgave av <A HREF> tag'en vi alle kjenner og elsker: <A HREF="javascript:speciallink()">...</A>
La oss kalle dette en JavaScript link. Dette forteller ganske enkelt browseren at n�r vi klikker en link, s� skal den kj�re JavaScript funksjonen speciallink(), som du husker vi definerte i headingen til fila. Det er viktig � ikke bruke TARGET attributtet til <A> tag'en n�r du anvender denne teknikken. Husk, du har opptil flere "target" frames i dette tilfellet, og de er allerede spesifisert i JavaScript funksjonen. Dersom du skulle komme til � bruke TARGET attributtet, ville browseren din se etter JavaScript funksjonen i TARGET framen du spesifiserer. I enkelte spesielle tilfelle ville du kanskje �nske dette, men i v�rt tilfelle er dette noe vi �nsker � unng�. Av samme grunn skal du passe p� � unng� � bruke <BASE TARGET=...> metoden til � spesifisere oppstart (default) target frame i et dokument med JavaScript linker. For � summere opp det hele skal du alts� lage en JavaScript funksjon som foretar de n�dvendige endringer hver gang du lager en link som skal oppdatere mer enn en frame. Du husker den frames baserte siten vi bygde i forrige seksjon. P� toppen av hver side hadde vi en tittel i store bokstaver som ga navn til den seksjonen du befant deg i (Produkter, Bestilling, etc. etc.). Hva om vi �nsket � plassere den tittelen i sin egen frame p� toppen av sida, slik at n�r brukeren scrollet seg nedover, s� ville tittelen/overskriften bli st�ende fast? Hver gang en bruker klikket p� en menylink, s� m�tte vi endre b�de tittelframen, og hovedsida. Det er lett � f� til dette med den nye teknikken vi har l�rt. Her er v�rt modifiserte eksempel: Dersom du skal benytte denne teknikken i stor skala, vil du trolig �nske � l�re mer om JavaScript. Tenk deg for eksempel at siten din har fem seksjoner, hver med mange underseksjoner, og at du �nsket � v�re i stand til � h�ndtere multi-frame links ikke bare i menyen din, men ogs� i hovedsidene. Du ville da m�tte skrive et uhorvelig antall JavaScript funksjoner, for s� � gjenta dem i headingen til omtrent hver eneste HTML fil i siten din. Med kjennskap til JavaScript er det mulig � dele en enkelt "flerbruksfunksjon" mellom alle frames'ene og HTML filene dine. Du vil s�ledes kunne kutte kraftig ned p� mengden av kode som m� til for � anvende denne teknikken over hele siten. Den enkle teknikken jeg har demonstert her, vil allikevel fungere perfekt p� en liten site. Det skjer ofte n�r du skriver en frames-basert site, at du �nsker en frame skal vise noe enkelt, f.eks. en tittel eller en definisjon. Plustelig finner du deg selv sittende � skrive haugevis av sm� HTML filer som skal lastes inn i denne framen. La oss tenke oss en frame der vi er i stand til � velge tekst og bakgrunnfarger. I en frame vil vi ha linker for hver tekst/bakgrunnsfargekombinasjon. I den andre vil vi vise resultatet av brukerens valg. Vi trenger kun en HTML fil for frame'n som inneholder linkene, mens vi trenger forskjellige HTML filer for hver eneste fargekombinasjon vi �nsker � vise i den andre frame'n. Hver av disse filene vil v�re sm�, og vil se slik ut:
<HTML>
Temmelig kjedelig, hva? Det verste er ikke bare at du vil m�tte skrive inn disse en etter en, men at brukerens browser vil m�tte downloade hver og en av dem. Hva om jeg fortalte at det ikke var noen grunn til � skrive alle disse filene? Hva om jeg fortalte at du kan endre innholdet i en frame uten � beh�ve � laste inn en ny HTML fil? I seksjonen ovenfor, l�rte jeg deg litt om JavaScript objekter, egenskaper (properties), og funksjoner. Det faller seg da slik at noen JavaScript objekter, i tillegg til � ha egenskaper (properties) du kan endre, ogs� har innebygde funksjoner som du kan bruke til � utf�re spesielle ting med. Disse innebygde funksjonene kalles metoder (methods). Som du husker representerer dokument objektet HTML fila som er lastet inn i en bestemt frame. Vi har allerede sett at dokument objektet har en egenskap (property) som kalles location som du kan bruke til � laste en ny fil inn i. Det viser seg at dokument objektet ogs� har en metode (method) kalt write(), som tillater deg � modifisere innholdet av frame'n direkte. Sammen med write(), trenger vi ogs� to andre metoder, nemlig open() og close(). open() sletter innholdet i dokumentet og forbereder det for skriving ved hjelp av write() metoden. close() forteller browseren din at du er ferdig med � skrive, og at den n� kan vise endringene du har foretatt. S�, i stedet for � laste inn en ny fil, kan vi endre innholdet i v�r eksempel frame slik:
parent.frames["sample"].document.open();
Legg merke til hvorledes teksten vi �nsker � skrive plasseres mellom parentesene i write(), og er omgitt av enkle hermetegn. Valget av enkle hermetegn er valgt for ikke � komme i konflikt med de doble hermetegnene som brukes i standard HTML kode. Som en snarvei (shortcut) vil vi opprette en variabel som vi bruker til lagring av lokaliseringen av det dokumentet vi skriver til. Tenk p� dette som et JavaScript "bokmerke" som vi kan bruke til � referere til parent.frames["sample"].document med et passende navn.Vi bruker n�kkelordet var til � opprette en ny variabel og tillegge den en verdi.
var sampledoc = parent.frames["sample"].document;
S� kommer det store trikket! Hva om vi ogs� bruker variabler for tekst bgcolor og textcolor? Vi kunne da endre verdien til disse variablene til hva vi m�tte �nske, og gjenbruke hele haugen med kode til � skrive om v�r nye fors�ksframe hver gang!
var bgcolor = 'black';
Legg merke til hvordan vi bruker '+' operatoren til � sette tekststrenger sammen med innholdet til v�re to variabler. For � avslutte hele opplegget legger vi hele kodesettet inn i en JavaScript funksjon. Funksjonen lar oss starte denne skriveoperasjonen hver gang brukeren klikker p� en link. Den gj�r ogs� en annen viktig ting. Den lar oss spesifisere verdiene til v�re to fargevariabler n�r vi setter funksjonen i gang! Vi gj�r dette ved � legge inn mellom parentesene i funksjonsnavnet v�rt navnene p� variablene vi �nsker � spesifisere verdiene til n�r funksjonen startes, adskilt av kolon. V�r ferdige funksjon vil se slik ut:
function chgcolor(bgcolor,textcolor) {
En link som starter funksjonen med en Sort bakgrunn og LightSteelBlue tekst ville se slik ut: <A HREF="javascript:chgcolor('Black','LightSteelBlue');">...</A>
Og det er det hele! Du har n� redusert dramatisk datamengden brukerens browser vil m�tte laste ned, samt lurt deg unna en haug av HTML koding, selvf�lgelig avhengig av hvor mange fargekombinasjoner du har tenkt � tilby.
|
