Cómo cambiar la fuente de iframe en JavaScript?

Al crear una página web o el sitio, existe un requisito para redirigir el usuario final a una página web diferente para acceder a la recepción/búsqueda "contenido". Además de eso, proporcionar varias funcionalidades al usuario al mismo tiempo, lo que hace que la accesibilidad sea factible. En tal caso, escenarios, cambiar la fuente de iframe en JavaScript hace maravillas para proporcionar al usuario facilitar en términos de tiempo y molestias.

Este blog explicará cómo cambiar la fuente de iframe en JavaScript.

¿Qué es un marco en línea??

Un "marco en línea"Se usa para contener otro documento especificado dentro del documento actual. Esto da como resultado cambiar las páginas web en función de los enlaces establecidos.

Cómo cambiar la fuente de iframe en JavaScript?

La fuente de iframe se puede cambiar en JavaScript utilizando los siguientes enfoques junto con el "getElementById ()" método:

"Parámetro pasado"Técnica.
"SelectedIndex" Propiedad.

Enfoque 1: Cambie la fuente de iframe en JavaScript utilizando la técnica de parámetros aprobados

Esta técnica se puede utilizar para cambiar a la página especificada colocando el enlace de página correspondiente como parámetro de una función cuando se accede con la ayuda de un botón.

Ejemplo
Sigamos el ejemplo declarado a continuación:

Cambie la fuente de iframe en JavaScript

En las líneas de código anteriores, realice los siguientes pasos:

Especifique el enlace indicado en el ""Etiqueta junto con las dimensiones ajustadas.
Además, cree un botón con un adjunto "al hacer clic"Redirección de eventos a la función ChangeifRame () que tiene el enlace especificado como su parámetro.
Esto dará como resultado dirigir la página al enlace establecido en el botón Haga clic.

Continuemos a la parte de JavaScript del código:

En el fragmento de código anterior:

Declarar una función llamada "Changeiframe ()".
En su definición, acceda al enlace especificado en el "marco en línea"Elemento usando el"documento.getElementById ()" método.
Después de eso, aplique el "SRC"Atributo y asigne el enlace establecido en el acceso a la función al enlace accedido utilizando el parámetro"cambiar".
Esto dará como resultado cambiar las páginas con respecto a los enlaces especificados en el clic del botón.

Producción

En la salida anterior, se puede observar que las páginas se cambian al hacer clic en el botón.

Enfoque 2: Cambie la fuente de iframe en JavaScript utilizando la propiedad SelectedIndex

El "SelectedIndexLa propiedad devuelve el índice de la opción seleccionada en una lista desplegable. Esta propiedad se puede aplicar para redirigir al enlace especificado con respecto al valor de la opción seleccionada de la lista desplegable.

Ejemplo
Observemos el siguiente ejemplo:

En las líneas de código anteriores, realice los siguientes pasos:

Recuerde el paso para especificar el enlace indicado dentro del "</strong>"Etiqueta que tiene el especificado"<strong>identificación</strong>"Y dimensiones ajustadas.</li> <li>En el siguiente paso, incluya el "<strong>seleccionar</strong>"Elemento tiene el especificado"<strong>identificación</strong>"Para crear una lista desplegable.</li> <li>Después de eso, contenga el "<strong>opción</strong>"Elemento para definir el valor de la opción. </li> <li>Especifique los enlaces establecidos como el "<strong>valor</strong>"Del elemento de opción.</li> <li>Además, cree un botón que tenga un "<strong>al hacer clic</strong>"Evento que invocará la función Changeiframe ().</li> </ul> <p>Pasemos a la parte JavaScript del código:</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>En el fragmento de código anterior:</p> <ul> <li>Defina una función llamada "<strong>Changeiframe ()</strong>". </li> <li>En su definición, acceda a la especificada "<strong>seleccionar</strong>"Elemento por su"<strong>identificación</strong>" utilizando el "<strong>documento.getElementById ()</strong>" método.</li> <li>En el siguiente paso, aplique el "<strong>SelectedIndex</strong>" y el "<strong>valor</strong>"Propiedades para redirigir al valor i.mi. Enlace contra la opción seleccionada correspondiente.</li> </ul> <p><strong>Producción</strong></p> <p>De la salida anterior, es evidente que las páginas están cambiando correctamente con respecto al "<strong>opción</strong>"Valor sobre el botón Haga clic.</p> <p>Conclusión</p> <p>El "<strong>getElementById ()</strong>"Método en combinación con la técnica de parámetro pasada o el"<strong>SelectedIndex</strong>La propiedad se puede usar para cambiar la fuente de iframe en JavaScript. La técnica anterior se puede utilizar para redirigir al enlace aprobado como el parámetro de la función en el clic del botón. El último enfoque se puede implementar para cambiar a los enlaces correspondientes con respecto a la opción seleccionada de la lista desplegable. Este tutorial explica cómo cambiar la fuente de iframe en 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://es.cyberaxe.org/article/how-to-change-the-page-title-in-javascript">« Cómo cambiar el título de la página en JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://es.cyberaxe.org/article/how-to-change-discord-notification-sound-on-mobile">Cómo cambiar el sonido de notificación de discordia en el móvil? »</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://es.cyberaxe.org/category/git">Git</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-generate-a-git-file-using-terminal--explained">Cómo generar un archivo git usando terminal? | Explicado</a> </div> <div class="white-news__text"> Para generar un archivo git utilizando el terminal, se puede usar el comando toque. Puede agregar el... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-break-and-continue-in-php">Cómo usar el descanso y continuar en PHP?</a> </div> <div class="white-news__text"> En PHP, la instrucción Break se usa para terminar un bucle o una instrucción de interruptor mientras... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-declare-variables-in-c">Cómo declarar variables en c++?</a> </div> <div class="white-news__text"> Para declarar una variable en C ++, debe especificar su tipo de datos y nombre. Además, lea esta guí... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/mariana-cotto">Mariana Cotto</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://es.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-install-and-use-oracle-virtualbox-extension-pack">Cómo instalar y usar Oracle Virtualbox Extension Pack?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mariana-cotto">Mariana Cotto</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/seaborn-axis-labels">Etiquetas del eje marino</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/golang">golang</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/introduction-to-golang-programming-language">Introducción al lenguaje de programación de Golang</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/windows-os">OS de Windows</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-turn-on-remote-desktop-on-pc">Cómo encender el escritorio remoto en la PC</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/javascript">Javascript</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-does-atob-method-do-in-javascript">¿Qué hace el método ATOB en JavaScript?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-melgar">Pilar Melgar</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">¿Cuál es un error de índice indefinido en PHP y cómo solucionarlo??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/javascript">Javascript</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-run-typescript-in-vs-code">Cómo ejecutar TypeScript en VS Code</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-php-strcmp-function">Cómo usar la función PHP STRCMP</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/salvador-anaya">Salvador Anaya</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/is-oracle-database-similar-to-mysql-database--explained">¿Es Oracle Database similar a la base de datos mySQL?? | Explicado</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-add-and-play-videos-on-a-webpage-using-html">Cómo agregar y reproducir videos en una página web usando HTML?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/hernan-delao">Hernán Delao</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sitio sobre el sistema operativo Linux. Aquí encontrará muchos artículos interesantes y guías útiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/python">Pitón</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/windows-os">OS de Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/docker">Estibador</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/r">Riñonal</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a></li> </li> <li class="menu-item"><a href="http://es.cyberaxe.org/all-categories"><b>Todas las categorias</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>