Hvordan ha en iframe bytte side med en knapp

Microsoft kaller en iFrame "et dokument i et dokument." Hvis du noensinne har sett en webside som sitter inne i en annen side, kan nettstedets utvikleren har skapt den effekten ved bruk av iframes. IFrames har mange bruksområder. For eksempel kan du vise værforhold på din webside ved å bygge inn en iFrame som inneholdt en vær nettsted. Hvis du kobler en interaktiv knapp til iFrame, kan brukerne endre iFrame side ved å klikke på knappen.

Bruksanvisning

1 Start Notepad eller HTML-redigeringsprogrammet.

2 Åpne en av websidene og legg til følgende HTML-kode:

<Iframe id = "IFrame1" width = "400px" height = "300px">

<P> Nettleseren din kan ikke vise iframes </ p>

</ Iframe>

<Input type = "button" value = "Endre Page" onclick = "return ChangePage ()" />

Dette skaper en iFrame. Det er "src" eiendoms peker på Googles hjemmeside. Knappen heter "ChangePage" kaller en Javascript-funksjonen når du klikker. Det funksjonsendring er iFrame side. Teksten "Nettleseren din kan ikke vise iframes" vises i en nettleser hvis det leserens innstillinger hindre den fra å vise rammer. Merk iFrame er "ID" eiendom. Denne verdien er "IFrame1." Dette id-verdien aktiverer en Javascript-funksjon for å finne iFrame og arbeide med det.

3 Legg denne koden til dokumentets "head" -seksjonen:

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

Var iFrameID = "IFrame1"

Var nyside = "http://www.bing.com";

funksjon ChangePage () {

Var iFrameObject = document.getElementById (iFrameID);

iFrameObject.src = nyside;

}

</ Script>

Variabelen "iFrameID" holder på ID-en iFrame opprettet i forrige trinn. Den "nyside" variable holder nettadressen til den nye siden du ønsker iFrame å vise. Det Adressen er Bing hjemmeside i dette eksempelet. Den "ChangePage" Javascript-funksjonen får en referanse til iFrame og endringen er dens "src" verdi til lagret i "nyside" variabel verdi.

4 Lagre dokumentet og åpne den i nettleseren din. Du vil se Googles hjemmeside inne sidens iFrame.

5 Klikk på "Endre Page" -knappen. Javascript-funksjonen utfører og endringen er iFrame side til Bing.

Hint

• Navn iFrame er "ID" noe du liker. I dette eksemplet er det navnet "iFrameID". Hvis du gi den nytt navn, endre verdien av "iFrameID" i Javascript for å matche det navnet. I produksjon, kan det hende du ikke vil at knappen for å endre iFrame side til Bing. Sett verdien av "nyside" til den nye nettadressen du ønsker skal vises når brukere klikker på "Endre Page" -knappen.