0

Tengo lo siguiente:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h1>URL</h1>
<!-- Esto se modifica visualmente para que el usuario sepa a donde va a ir. -->
<h2>http://ejemplo.com/<span id="spanData1"></span>/<span id="spanData2"></span></h2>
<!-- Estos son los inputs de data. -->
<input type="text" id="data1">
<input type="text" id="data2">
<!-- Este botón hará la redirección -->
<button id="ir">Ir</button>
</div>

lo que hace todo esto es construir un link de una página externa y al dar click en el boton 'ir' pues me lleva a la página.

// Variables para la modificación de URL
var data1 = ''
var data2 = '' //Definida pero nunca usada

// Al usar un tecla y levantarla
$('#data1').keyup(function() {
// Guardar el dato en la variable correspondiente
data1 = $('#data1').val(); 
// Modificar la URL que se ve
$('#spanData1').text(data1) //Cambio esta parte en pos de la simplicidad de 
//código y su legibilidad


})

// Hace lo mismo que el anterior pero para el segundo
$('#data2').keyup(function() {
// Guardar el dato en la variable correspondiente
data2 = $('#data2').val(); 
$('#spanData2').text(data2)
})

//Al hacer click en el boton ir
$('#ir').click(function() {
// Crear la URL para la redirección y...
var url = 'http://ejemplo.com/' + data1 + '/' + data2;
// Hacer la Redirección en una ventana nueva
//window.open(url, '_blank');
console.log(url)
})

lo que quiero lograr es que esa página o ese link se abra en un div dentro de la página principal donde se encuentra el 'formulario' y no tener que salir de ella. un tipo de iframe o embed pero automático. es posible hacer todo esto con javascript o jquery?

he pensado en meter las páginas en un embed o un iframe y llamarlas, pero tendria que poner todos los link y sucede que hay información de no se puede ver, además que tendria que hacer todo manual y la idea es que sea todo automático.

1 respuesta 1

1

Puedes hacer esto:

<div>
<h1>URL</h1>
<!-- Esto se modifica visualmente para que el usuario sepa a donde va a ir. -->
<h2>http://ejemplo.com/<span id="spanData1"></span>/<span id="spanData2"></span></h2>
<!-- Estos son los inputs de data. -->
<input type="text" id="data1">
<input type="text" id="data2">
<!-- Este botón hará la redirección -->
<button id="ir">Ir</button>
</div>
<div id="iframe"></div>

Ahora con js tomas las variables y creas un innerHTML con javascript para poner el iframe en el div con id "iframe"

var data1 = ''
var data2 = '' //Definida pero nunca usada

// Al usar un tecla y levantarla
$('#data1').keyup(function() {
// Guardar el dato en la variable correspondiente
data1 = $('#data1').val(); 
// Modificar la URL que se ve
$('#spanData1').text(data1) //Cambio esta parte en pos de la simplicidad de 
//código y su legibilidad


})

// Hace lo mismo que el anterior pero para el segundo
$('#data2').keyup(function() {
// Guardar el dato en la variable correspondiente
data2 = $('#data2').val(); 
$('#spanData2').text(data2)
})

//Al hacer click en el boton ir
$('#ir').click(function() {
// Crear la URL para la redirección y...
var url = 'http://ejemplo.com/' + data1 + '/' + data2;
//Mí código
//Tomamos el div con id iframe y le hacemos un 
//innerHTML con un iframe, le agregamos la 
//variable url dentro del src del mismo y listo
document.getElementById("iframe").innerHTML = "<iframe src=" + url + ">Tu navegador no soporta iframes.</iframe>";
//Imprimimos la variable url en la consola (innecesario)
console.log(url)
})

Eso seria todo! :) Un saludo compañero :D

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.