Come avere un iFrame pagine cambiano con un pulsante

October 4

Come avere un iFrame pagine cambiano con un pulsante


Microsoft chiama un iFrame "un documento all'interno di un documento." Se avete mai visto una pagina Web seduto all'interno di un'altra pagina, sviluppatore del sito può aver creato in tal senso utilizzando iFrame. IFrame hanno molti usi. Ad esempio, è possibile mostrare le condizioni meteorologiche sulla tua pagina web, grazie all'integrazione di un iFrame che conteneva un sito meteo. Se si collega un pulsante interattivo per il vostro iFrame, gli utenti possono modificare la pagina del iFrame facendo clic sul pulsante.

istruzione

1 Avviare il programma di editing HTML Blocco note o.

2 Aprire una delle tue pagine web e aggiungere il seguente codice HTML:

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

<P> Il tuo browser non può visualizzare iFrame </ p>

</ Iframe>

<Input type = valore "pulsante" = "Modifica Pagina" onclick = "tornare changepage ()" />

Questo crea un iFrame. E ' "src" punti di proprietà alla home page di Google. Il pulsante denominato "changepage" richiama una funzione JavaScript quando si fa clic. Questo cambiamento è la funzione pagina del iFrame. Il testo "Il tuo browser non può visualizzare iFrame" appare in un browser se impostazioni del suo navigatore web impediscono di fotogrammi di visualizzazione. Nota del iFrame proprietà "ID". Tale valore è "IFrame1." Questo valore id abilita una funzione JavaScript per individuare il iFrame e lavorare con esso.

3 Aggiungere questo codice alla sezione "testa" del documento:

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

var iFrameID = "IFrame1"

var newPage = "http://www.bing.com";

Funzione changepage () {

var iFrameObject = document.getElementById (iFrameID);

iFrameObject.src = newPage;

}

</ Script>

Il "iFrameID" variabile contiene l'ID del iFrame creato nella fase precedente. La variabile "newPage" tiene l'URL della nuova pagina che si desidera che il iFrame da visualizzare. Questo URL è la home page di Bing in questo esempio. Il "changepage" JavaScript funzione ottiene un riferimento al iFrame e il cambiamento del suo valore "src" per il valore memorizzato nella variabile "newPage".

4 Salvare il documento e aprirlo nel browser. Vedrete home page di Google all'interno iFrame della pagina.

5 Fare clic sul pulsante "Modifica Pagina". La funzione JavaScript esegue e il cambiamento è la pagina del iFrame per Bing.

Consigli e avvertenze

  • Assegnato un nome qualsiasi di iFrame "ID" che ti piace. In questo esempio, che chiama "iFrameID." Se si rinomina esso, modificare il valore di "iFrameID" nel JavaScript per abbinare quel nome. Nella produzione, non si può decidere il tasto per cambiare la pagina del iFrame per Bing. Impostare il valore di "newPage" al nuovo URL che si desidera visualizzare quando gli utenti fanno clic sul pulsante "Modifica Pagina".