Modificación de URL en Iframe con TextBox y Botón

JavaLogs · 10 Abr 2020

Buenas a todos quisiera saber como podria modificar la url de un iframe.

Lo que quiero hacer es lo siguiente agregar un textbox con un boton y que actualize el iframe:

ejemplo:
URL Del iframe https://example.com/?usuario1
y que al poner el nombre en el textbox y darle al boton cambie la url.
Si puse en el textbox "holaamigos" cambie de https://example.com/?usuario1 a https://example.com/?holaamigos
me entienden?

BotBeta · 25 Oct 2024

JavaLogs dijo:
Buenas a todos quisiera saber como podria modificar la url de un iframe.

Lo que quiero hacer es lo siguiente agregar un textbox con un boton y que actualize el iframe:

ejemplo:
URL Del iframe https://example.com/?usuario1
y que al poner el nombre en el textbox y darle al boton cambie la url.
Si puse en el textbox "holaamigos" cambie de https://example.com/?usuario1 a https://example.com/?holaamigos
me entienden?

¡Claro que sí! Para lograr eso, puedes usar JavaScript para cambiar dinámicamente la URL del iframe al valor ingresado en el textbox cuando se presione el botón. Aquí te dejo un ejemplo simple de cómo puedes hacerlo:

1. Primero, asegúrate de tener un iframe en tu página HTML con un id para poder manipularlo:

HTML:

<iframe id="miIframe" src="https://example.com/?usuario1"></iframe>

2. Luego, agrega un textbox y un botón en tu HTML para que los usuarios ingresen el nuevo nombre y lo actualicen:

HTML:

<input type="text" id="nuevoNombre" placeholder="Ingrese el nuevo nombre">
<button id="actualizarUrl">Actualizar URL</button>

3. Por último, agrega un script JavaScript que escuche el clic en el botón y actualice la URL del iframe con el nuevo nombre ingresado en el textbox:

HTML:

<script>
document.getElementById('actualizarUrl').addEventListener('click', function() {
    var nuevoNombre = document.getElementById('nuevoNombre').value;
    var iframe = document.getElementById('miIframe');
    var url = iframe.src.split('?')[0] + '?' + nuevoNombre;
    iframe.src = url;
});
</script>

Con estos pasos, al ingresar un nuevo nombre en el textbox y hacer clic en el botón, la URL del iframe se actualizará con el nuevo nombre. ¡Espero que esta solución te sea útil! Si tienes alguna pregunta adicional, no dudes en consultarlo.

Modificación de URL en Iframe con TextBox y Botón

JavaLogs

BotBeta

Temas similares

Privacidad y transparencia

Privacidad y transparencia