Come modificare il contenuto di un iFrame con JavaScript

May 27

Un frame in linea, o iFrame, è una cornice all'interno di una pagina Web che può contenere un oggetto esterno come un'altra pagina Web. L'attributo "src" iFrame specifica la pagina Web da caricare nel telaio. E 'spesso il caso che si desidera il contenuto iframe per variare in base alla logica del programma, un evento o di alcuni altri criteri in fase di esecuzione. È possibile modificare il contenuto del iFrame modificando l'attributo "src".

istruzione

1 Creare un nuovo file HTML utilizzando un editor HTMlL o il blocco note. Inserire le intestazioni HTML per il file. Ad esempio, digitare:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />

<Title> Struttura </ title>

2 Definire una funzione JavaScript per modificare l'attributo "src" del iFrame al fine di modificarne il contenuto. Ad esempio, digitare:

<Script type = "text / javascript">

changeContents function () {

var frame = document.getEelemtnById("myFrame");

if (frame.src = "this.html")

frame.src = "that.html";

altro

frame.src = "this.html";

}

</ Script>

</ Head>

3 Creazione di un pulsante HTML all'interno dei tag "body" che chiamerà la funzione JavaScript per modificare il contenuto iFrame quando si fa clic. Ad esempio, digitare:

<Body>

<Form> <input type = valore "tasto" = "change" onclick = "changeContents ()" /> </ form>

4 Inserire il iFrame nella pagina Web. Ad esempio, digitare:

<Iframe id = larghezza "MyFrame" = "300" height = "300"> </ iframe>

</ Body>

</ Html>

5 Salvare il file e tirare su la pagina Web in un browser. Test per assicurarsi che lo script funziona correttamente.