Questo blog spiegherà come modificare la sorgente iframe in JavaScript.
Cos'è un Inline Frame?
Un ' cornice in linea ” viene utilizzato per contenere un altro documento specificato all'interno del documento corrente. Ciò comporta la commutazione delle pagine Web in base ai collegamenti indicati.
Come modificare la sorgente dell'iframe in JavaScript?
La sorgente dell'iframe può essere modificata in JavaScript utilizzando i seguenti approcci insieme al ' getElementById() ' metodo:
- “ Parametro superato 'Tecnica.
- “ selezionatoIndice ' Proprietà.
Approccio 1: modificare la sorgente dell'iframe in JavaScript utilizzando la tecnica dei parametri passati
Questa tecnica può essere utilizzata per passare alla pagina specificata inserendo il collegamento alla pagina corrispondente come parametro di una funzione quando si accede con l'aiuto di un pulsante.
Esempio
Seguiamo l'esempio sotto indicato:
< centro >< h2 > Cambia la sorgente dell'iframe in javascript h2 >
< iframe id = 'pagina web' src = 'https://linuxhint.com/detect-tab-key-javascript/' larghezza = '1000' altezza = '550' frameborder = '0' scorrimento = 'No' > iframe >
< fratello >< fratello >
< pulsante al clic = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Fare clic per visualizzare la pagina dei comandi di Linux pulsante >
< fratello > fratello >
centro >
Nelle righe di codice precedenti, eseguire i seguenti passaggi:
- Specificare il collegamento indicato nel '
” insieme alle dimensioni regolate. - Inoltre, crea un pulsante con un ' al clic ” evento che reindirizza alla funzione changeIframe() avente come parametro il link specificato.
- Ciò comporterà l'indirizzamento della pagina al collegamento indicato al clic del pulsante.
Continuiamo con la parte JavaScript del codice:
< tipo di sceneggiatura = 'testo/javascript' >
funzione changeIframe ( modificare ) {
documento. getElementById ( 'pagina web' ) . src = modificare ;
}
copione >
Nello snippet di codice sopra:
- Dichiara una funzione chiamata ' cambiaIframe() ”.
- Nella sua definizione, accedi al link specificato nella sezione “ cornice in linea ” elemento utilizzando il “ documento.getElementById() ' metodo.
- Successivamente, applica il ' src ” attribuisce e alloca il link dichiarato al momento della funzione accede al link richiamato utilizzando il parametro “ modificare ”.
- Ciò comporterà il passaggio delle pagine rispetto ai collegamenti specificati al clic del pulsante.
Produzione
Nell'output sopra, si può osservare che le pagine vengono cambiate facendo clic sul pulsante.
Approccio 2: modifica della sorgente iframe in JavaScript utilizzando la proprietà selectedIndex
Il ' selezionatoIndice La proprietà ” restituisce l'indice dell'opzione selezionata in un elenco a discesa. Questa proprietà può essere applicata per reindirizzare al collegamento specificato rispetto al valore dell'opzione selezionata dall'elenco a discesa.
Esempio
Osserviamo il seguente esempio:
< iframe id = 'pagina web' src = 'https://linuxhint.com/detect-tab-key-javascript/' larghezza = '1000' altezza = '550' frameborder = '0' scorrimento = 'No' > iframe >
< fratello >< fratello >
< selezionare id = 'collegamenti' >
< valore dell'opzione = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Passa all'articolo 1
< valore dell'opzione = 'https://linuxhint.com/convert-array-to-object-javascript/' > Passa all'articolo Due
Selezionare >
< fratello >< fratello >
< pulsante suClick = 'changeIframe();' > Modifica origine iframe pulsante >
< fratello >< fratello >
corpo > centro >
Nelle righe di codice precedenti, eseguire i seguenti passaggi:
- Ricorda il passaggio per specificare il collegamento indicato all'interno del '