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/aws">AWS</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/what-is-the-difference-between-aws-aurora-and-mysql">Qual è la differenza tra AWS Aurora e MySQL?</a> </div> <div class="white-news__text"> AWS Aurora è più efficiente e utilizzato per la creazione di database utilizzati per la produzione e... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-evita-damico">Dr. Evita Damico</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">Come usare il cmdlet di Object in PowerShell</a> </div> <div class="white-news__text"> Il cmdlet ordin-object è responsabile dell'ordinamento degli oggetti in base alle loro proprietà. Pu... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/c-programming">Programmazione C</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/books-and-guides-for-c-language">Libri e guide per la lingua C</a> </div> <div class="white-news__text"> Ci sono 6 libri e guide utili per l'apprendimento della lingua C. Segui questo articolo per imparare... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/artemide-ricci">Artemide Ricci</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/remove-special-characters-from-string-python">Rimuovi i caratteri speciali da String Python</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/how-do-i-check-if-a-string-is-empty-in-python">Come faccio a controllare se una stringa è vuota in Python</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-arrayreverse-function-in-php">Come utilizzare la funzione Array_Reverse in PHP</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-does-atob-method-do-in-javascript">Cosa fa il metodo ATOB in JavaScript</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sarita-negri">Sarita Negri</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/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">Cos'è un errore di indice indefinito in PHP e come risolverlo?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-inheritance-in-golang">Cosa è eredità nel golang</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</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-to-create-html-bullet-points">Come creare punti elenco HTML?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/java">Giava</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-import-java-io--in-java">Cos'è l'importazione Java.io.*; in Java?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/piererminio-de-luca">Piererminio De luca</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/a-comparison-between-cloudtrail-and-guardduty">Un confronto tra CloudTrail e Guardduty</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/java-database-connectivity-with-oracle">Connettività del database Java con Oracle</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</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>