Come modificare la fonte iFrame in JavaScript?

Dante Palumbo

Durante la creazione di una pagina Web o del sito, è necessario reindirizzare l'utente finale in una pagina Web diversa per accedere alla pertinente/cercata "contenuto". Inoltre, fornendo varie funzionalità all'utente, rendendo possibile l'accessibilità possibile. In tali scenari di caso, la modifica della fonte iFrame in JavaScript fa miracoli nel fornire la facilità dell'utente in termini di tempo e seccatura.

Questo blog spiegherà come cambiare la fonte iFrame in JavaScript.

Cos'è un frame in linea?

UN "frame in linea"Viene utilizzato per contenere un altro documento specificato all'interno del documento corrente. Ciò si traduce nel cambio delle pagine Web in base ai collegamenti dichiarati.

Come modificare la fonte iFrame in JavaScript?

La fonte iFrame può essere modificata in JavaScript usando i seguenti approcci insieme a "getElementById ()" metodo:

"Parametro passato"Tecnica.
"SelectedIndex" Proprietà.

Approccio 1: Modifica la sorgente IFRAME in JavaScript usando la tecnica dei parametri passati

Questa tecnica può essere utilizzata per passare alla pagina specificata posizionando il collegamento della pagina corrispondente come parametro di una funzione quando si accede con l'aiuto di un pulsante.

Esempio
Seguiamo l'esempio di seguito:

Cambia la sorgente iFrame in JavaScript

Nelle righe di codice sopra, eseguire i seguenti passaggi:

Specificare il collegamento dichiarato in ""Tag insieme alle dimensioni regolate.
Inoltre, crea un pulsante con un allegato "al clic"Reindirizzamento dell'evento alla funzione ChangeFrame () con il collegamento specificato come parametro.
Ciò comporterà la direzione della pagina sul collegamento indicato sul clic del pulsante.

Continuiamo alla parte JavaScript del codice:

Nel frammento di codice sopra:

Dichiarare una funzione denominata "ChangeFrame ()".
Nella sua definizione, accedi al collegamento specificato in "frame in lineaElemento "usando il"documento.getElementById ()" metodo.
Dopodiché, applica il "src"Attributo e allocare il collegamento dichiarato al momento dell'accesso alla funzione al collegamento accessibile utilizzando il parametro"modifica".
Ciò comporterà il cambio delle pagine rispetto ai collegamenti specificati al clic del pulsante.

Produzione

Nell'uscita sopra, si può osservare che le pagine vengono cambiate facendo clic sul pulsante.

Approccio 2: Modifica la sorgente iFrame in JavaScript utilizzando la proprietà selectedIndex

IL "SelectedIndex"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:

Nelle righe di codice sopra, eseguire i seguenti passaggi:

Ricordiamo il passaggio per specificare il collegamento dichiarato all'interno del "</strong>"Tag con il specificato"<strong>id</strong>"E le dimensioni regolate.</li> <li>Nel passaggio successivo, includi il "<strong>Selezionare</strong>"Elemento con il specificato"<strong>id</strong>"Per creare un elenco a discesa.</li> <li>Successivamente, contenere il "<strong>opzione</strong>"Elemento per definire il valore dell'opzione. </li> <li>Specificare i collegamenti dichiarati come "<strong>valore</strong>"Dell'elemento di opzione.</li> <li>Inoltre, crea un pulsante con un "<strong>al clic</strong>"Evento che invocherà la funzione ChangeFrame ().</li> </ul> <p>Passiamo alla parte JavaScript del codice:</p> <script type="text/javascript"><br>function changeIframe() <br>var get = document.getElementById("links");<br>var dropDown = get.options[get.selectedIndex].value;<br>document.getElementById("webpage").src= dropDown ;<br><br></script> <p>Nel frammento di codice sopra:</p> <ul> <li>Definire una funzione chiamata "<strong>ChangeFrame ()</strong>". </li> <li>Nella sua definizione, accedi al specificato "<strong>Selezionare</strong>"Elemento per il suo"<strong>id</strong>" usando il "<strong>documento.getElementById ()</strong>" metodo.</li> <li>Nel passaggio successivo, applica il "<strong>SelectedIndex</strong>" e il "<strong>valore</strong>"Proprietà da reindirizzare al valore i.e. collegamento contro l'opzione selezionata corrispondente.</li> </ul> <p><strong>Produzione</strong></p> <p>Dall'output di cui sopra, è evidente che le pagine stanno cambiando correttamente rispetto al "<strong>opzioni</strong>"Valore al clic del pulsante.</p> <p>Conclusione</p> <p>IL "<strong>getElementById ()</strong>"Metodo in combinazione con la tecnica dei parametri passati o"<strong>SelectedIndex</strong>"La proprietà può essere utilizzata per modificare la fonte iFrame in JavaScript. La prima tecnica può essere utilizzata per reindirizzare al collegamento passato come parametro della funzione sul clic del pulsante. Quest'ultimo approccio può essere implementato per passare ai collegamenti corrispondenti rispetto all'opzione selezionata dall'elenco a discesa. Questo tutorial spiega come cambiare la sorgente iFrame in JavaScript. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://it.cyberaxe.org/article/how-to-change-the-page-title-in-javascript">« Come modificare il titolo della pagina in JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://it.cyberaxe.org/article/how-to-change-discord-notification-sound-on-mobile">Come cambiare il suono di notifica di discordia sul cellulare? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-convert-a-decimal-to-a-double-in-c">Come convertire un decimale in un doppio in C#</a> </div> <div class="white-news__text"> Per convertire un valore decimale in un doppio in C#, usiamo il decimale.Metodo ToDouble (). Ci vuol... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/cristyn-de-santis">Cristyn De Santis</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-subtraction-assignment--operator-in-c">Come utilizzare l'operatore di assegnazione di sottrazione in C ++</a> </div> <div class="white-news__text"> In C ++ il -= è un operatore di assegnazione di sottrazione, sottrae due valori laterali opposti dal... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-polymorphism-in-c">Come usare il polimorfismo in C#</a> </div> <div class="white-news__text"> Il polimorfismo consente di trattare oggetti di classi distinte come provenivano dalla stessa classe... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-unzip-files-in-python">Come decomprimere i file in Python</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/artemide-ricci">Artemide Ricci</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/python-count-characters-in-string">Python Count personaggi nella stringa</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/python-chmod">Python Chmod</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-evita-damico">Dr. Evita Damico</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-the-difference-between-oracle-virtualbox-and-vmware">Qual è la differenza tra Oracle VirtualBox e VMware?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">Come può essere utilizzato Flexbox per creare una barra di navigazione?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-evita-damico">Dr. Evita Damico</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-the-get-service-command-in-powershell">Come usare il comando get-service in PowerShell</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-login-into-docker-via-command-prompt">Come accedere a Docker tramite il prompt dei comandi?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/cristyn-de-santis">Cristyn De Santis</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/git">Idiota</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-does-git-work">Come funziona Git?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/felicia-giuliani">Felicia Giuliani</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-php-rand-function">Come utilizzare la funzione Php Rand</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-break-and-continue-in-php">Come usare la pausa e continuare in PHP?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sito sul sistema operativo Linux. Qui troverai molti articoli interessanti e guide utili</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/python">Pitone</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/windows-os">OS Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://it.cyberaxe.org/all-categories"><b>Tutte le categorie</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>