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/c-sharp">c agudo</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-inheritance-in-c">Cómo usar la herencia en C#</a> </div> <div class="white-news__text"> La herencia permite que una clase herede propiedades y métodos de otra clase. Permite la creación de... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/daniela-villasenor">Daniela Villaseñor</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-check-if-an-array-is-empty-in-php">Cómo verificar si una matriz está vacía en PHP?</a> </div> <div class="white-news__text"> Encontrar una matriz vacía en PHP es crucial para garantizar la ejecución de código suave y sin erro... </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/golang">golang</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-is-range-keyword-in-golang">¿Qué es la palabra clave de rango en Golang?</a> </div> <div class="white-news__text"> En Golang, los bucles, como para el bucle iterate, a través de los elementos de una matriz, rodajas,... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</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/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-unzip-files-in-python">Cómo descomponer los archivos en Python</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</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/numpy-astype">Astype numpy</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/daniela-villasenor">Daniela Villaseñor</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/salesforce">Fuerza de ventas</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Lista</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/html">html</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-css-flex-grow-property">Cómo usar la propiedad CSS Flex-Grow?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-canales">Lorenzo Canales</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/how-to-use-time-now-function-in-golang---examples">Cómo usar el tiempo.Ahora funcione en Golang - Ejemplos</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-aws-guardduty-and-why-it-is-used">¿Qué es AWS Guardduty y por qué se usa??</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-elastic-beanstalk-is-it-paas-or-iaas">¿Qué es elastic beanstalk?? ¿Es Paas o Iaas??</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/powershell">Potencia Shell</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-the-move-item-cmdlet-in-powershell">Cómo usar el cmdlet de movimiento de movimiento en PowerShell?</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/docker">Estibador</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-login-into-docker-via-command-prompt">Cómo iniciar sesión en Docker a través del símbolo del sistema?</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/docker">Estibador</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-docker-registry-is-set-as-the-default">¿Qué registro de Docker se establece como el valor predeterminado??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</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>