Hvordan få tilgang objekter Utenfor en Iframe

Hvis du vil at websiden for å vise et vindu som inneholder en av websidene dine, kan du gjøre det ved å plassere en iframe på hovedsiden. Iframes er ikke så vanlig som de var på 90-tallet, men fra datoen for offentliggjøring, alle moderne nettlesere støtter dem. Forstå hvordan en iframe kommuniserer med siden som holder det er viktig hvis din iframe må tilgang til et objekt som ikke finnes i HTML-koden.

Bruksanvisning

1 Legg til følgende kode i body-delen av en av HTML-dokumenter:

<Iframe id = "iframe1" name = "iframe1" src = "iframe1.htm"> </ iframe>
<Input id = "parentTextbox" type = "text" value = "red" />

Den første uttalelsen skaper en iframe som viser til et HTML-dokument som heter "iframe1.html." Inngangs tag skaper en tekstboks der verdien er "rød". Lagre dette dokumentet, lukke den og åpne en annen HTML-dokument. Dokumentet du åpner vil bli siden som vises på innsiden av iframe.

2 Lim inn koden vist nedenfor i dokumentets hoveddel:

<Input type = "button" value = "Access Parent" onclick = "return accessParent ()" />

Denne koden skaper en knapp som kaller opp en funksjon som heter accessParent når den klikkes.

3 Lim inn følgende Javascript-kode i dokumentet manus seksjon:

funksjon accessParent () {
Var objectToGet = "parentTextbox";
Var parentObject = parent.document.getElementById (objectToGet);
Var objectValue = parentObject.value;
parentObject.value = "grønn";
alert ( "Parent objekt value =" + objectValue);
}

Den første setningen oppretter en variabel kalt objectToGet. Sin verdi, "ParentTextbox," er ID tekstboksen bosatt i den overordnede dokumentet. Den neste setningen bruker getElementById metoden for å hente dette objektet, og den endelige uttalelsen lagrer objektets verdi i objectValue variabel. Den varslingsmetode viser at verdien.

4 Lagre dette dokumentet og gi den navnet "iframe1.html." Du må gi den dette navnet fordi det er navnet iframe har i de overordnede dokumentreferanser. På dette punktet det første dokumentet du redigerte, foreldrene, inneholder iframe tag. Den andre dokument, barnet, vises inne i foreldrenes iframe.

5 Start nettleseren og åpne den overordnede dokumentet. Du vil se den andre HTML-dokumentet inne i iframe container. Klikk på "Access Parent" -knappen for å kjøre koden. Javascript-funksjonen kjører inne i iframe, henter verdien som er lagret i foreldrenes tekstboksen og viser ordet "rød" i et meldingsvindu.

Hint

  • Fordi du har muligheten til å få tilgang til en overordnet formål og gjøre den synlig i en iframe, kan du undersøke objektets andre egenskaper også, og endre dem. Hvis du limer parentObject.value = "grønn" på slutten av Javascript-funksjonen, for eksempel tekstboks verdi endres til "grønne".
  • Iframe kan ikke tilgang til innholdet i en forelder HTML-dokument hvis foreldrenes dokumentet ligger i et annet domene. For eksempel, hvis det overordnede dokumentet ligger på "http://www.domain1.com," iframe dokument må også ligge på den plasseringen.