| Frames By Kevin Yank (kyank@ibm.net) 27 September 1998 |
 |
| Frames By Kevin Yank (kyank@ibm.net) 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.
|
