Come accedere oggetti al di fuori di un Iframe

September 10

Se vuoi la pagina Web per visualizzare una finestra che contiene un'altra delle tue pagine Web, è possibile farlo inserendo un iframe nella pagina principale. Iframe non sono così comuni come lo erano negli anni '90, ma a partire dalla data di pubblicazione, tutti i browser moderni li supportano. Capire come un iframe comunica con la pagina che contiene è essenziale se il vostro iframe ha bisogno di accedere a un oggetto che non esiste nel suo codice HTML.

istruzione

1 Aggiungere il seguente codice alla sezione del corpo di uno dei tuoi documenti HTML:

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

La prima istruzione crea un iframe che fa riferimento a un documento HTML denominato "iframe1.html." Il tag input crea una casella di testo il cui valore è "rosso". Salvare il documento, chiuderlo e aprire un altro documento HTML. Il documento si apre diventerà la pagina visualizzata all'interno del iframe.

2 Incollare il codice riportato di seguito nella sezione corpo del documento:

<Input type = valore "pulsante" = "Parent Accesso" onclick = "tornare accessParent ()" />

Questo codice crea un pulsante che chiama una funzione denominata accessParent quando si fa clic.

3 Incollare il seguente codice JavaScript nella sezione dello script del documento:

Funzione accessParent () {
var objectToGet = "parentTextbox";
var = ParentObject parent.document.getElementById (objectToGet);
var = objectValue parentObject.value;
parentObject.value = "verde";
alert ( "valore oggetto Parent =" + objectValue);
}

La prima istruzione crea una variabile denominata objectToGet. Il suo valore, "ParentTextbox," è l'ID della casella di testo che risiede nel documento principale. L'istruzione successiva utilizza il metodo getElementById per recuperare l'oggetto, e la dichiarazione finale memorizza il valore dell'oggetto nella variabile objectValue. Il metodo di avviso viene visualizzato tale valore.

4 Salva questo documento e il nome "iframe1.html." È necessario dargli questo nome perché questo è il nome del iframe ha nei riferimenti documento principale. A questo punto il primo documento è stato modificato, il genitore, contiene il tag iframe. Il secondo documento, il bambino, appare all'interno iframe del genitore.

5 Avviare il browser Web e aprire il documento principale. Si vedrà il secondo documento HTML all'interno del contenitore iframe. Fare clic sul pulsante "Parent accesso" per eseguire il codice. La funzione JavaScript viene eseguito all'interno del iframe, recupera il valore memorizzato nella casella di testo del genitore e visualizza la parola "rosso" in una finestra di messaggio.

Consigli e avvertenze

  • Perché si ha la possibilità di accedere all'oggetto di un genitore e renderlo visibile in un iframe, è possibile esaminare le altre proprietà dell'oggetto come bene e cambiarle. Se si incolla parentObject.value = "verde" alla fine della funzione JavaScript, per esempio, cambia il valore della casella di testo di "verde".
  • Il tuo iframe non può accedere ai contenuti di un documento HTML genitore se il documento del genitore si trova in un dominio diverso. Per esempio, se il documento principale risiede a "http://www.domain1.com," documento del iframe deve inoltre risiedere in quella posizione.