iframe y form

eilex · #1 (**permalink**) 04/09/2009, 03:00

¿Como puedo enviar una href a un iframe desde un form para que el iframe cambie a la web que le ponga?

Si podeis pasarme un ejemplo os lo agradeceria mucho; gracias de todas meneras ^^

abimaelrc · #2 (**permalink**) 04/09/2009, 04:14

Esto lo logras con javascript. Mira este ejemplo http://www.w3schools.com/HTMLDOM/prop_iframe_src.asp

eilex · #3 (**permalink**) 04/09/2009, 10:48

Ahora tengo esto:

Código HTML:

<html>
<body bgcolor="#000000">
<FORM ACTION="" METHOD="POST"> 
<img border="0" onclick="test.location.href='http;//www,google,es/';document.getElementById('test').frameBorder=1" src="world.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16"><img border="0" onclick="test.location.href='http;//rampage-clan,ukgame,co,uk';document.getElementById('test').frameBorder=1" src="group.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16"><img border="0" onclick="test.location.href='http;//space,widicommunity,com';document.getElementById('test').frameBorder=1" src="heart.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16">
<INPUT TYPE="text" NAME="web" size="100">
<img border="0" onclick="changeSource()" src="folder_go.jpg" width="16" height="16" TYPE="submit" />
</FORM>
<p>
<script type="text/javascript">
function changeSource()
  {
  document.getElementById("test").src="URL"
  }
</script>
<iframe src="http;\\www,widicommunity,com" frameborder="0" name="test" id="test" width=100% height=800 border="0" align="absbottom" marginwidth="1" marginheight="1"></iframe>
</p>

</html>

¿Como utilizo el texto de el campo de texto URL en la funcion changeSource()?

Puse , y ; en las direcciones porque no me deja ponerlas.

abimaelrc · #4 (**permalink**) 04/09/2009, 11:01

Tendiras que crear un parametro en la funcion de changeSource y llamar el campo algo así

Código html:

Ver original<html>
<body bgcolor="#000000">
<FORM name="formulario" ACTION="" METHOD="POST"> 
<img border="0" onclick="test.location.href='http;//www,google,es/';document.getElementById('test').frameBorder=1" src="world.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16"><img border="0" onclick="test.location.href='http;//rampage-clan,ukgame,co,uk';document.getElementById('test').frameBorder=1" src="group.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16"><img border="0" onclick="test.location.href='http;//space,widicommunity,com';document.getElementById('test').frameBorder=1" src="heart.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16">
<INPUT TYPE="text" NAME="web" size="100">
<img border="0" onclick="changeSource(document. formulario.web.value)" src="folder_go.jpg" width="16" height="16" TYPE="submit" />
</FORM>
<p>
<script type="text/javascript">
function changeSource(url)
  {
  document.getElementById("test").src=url
  }
</script>
<iframe src="http;\\www,widicommunity,com" frameborder="0" name="test" id="test" width=100&#37; height=800 border="0" align="absbottom" marginwidth="1" marginheight="1"></iframe>
</p>
</html>

eilex · #5 (**permalink**) 04/09/2009, 18:34

Cita:

Iniciado por abimaelrc

Tendiras que crear un parametro en la funcion de changeSource y llamar el campo algo así

Código html:

Ver original<html>
<body bgcolor="#000000">
<FORM name="formulario" ACTION="" METHOD="POST"> 
<img border="0" onclick="test.location.href='http;//www,google,es/';document.getElementById('test').frameBorder=1" src="world.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16"><img border="0" onclick="test.location.href='http;//rampage-clan,ukgame,co,uk';document.getElementById('test').frameBorder=1" src="group.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16"><img border="0" onclick="test.location.href='http;//space,widicommunity,com';document.getElementById('test').frameBorder=1" src="heart.jpg" width="16" height="16"><img border="0" src="black.jpg" width="16" height="16">
<INPUT TYPE="text" NAME="web" size="100">
<img border="0" onclick="changeSource(document. formulario.web.value)" src="folder_go.jpg" width="16" height="16" TYPE="submit" />
</FORM>
<p>
<script type="text/javascript">
function changeSource(url)
  {
  document.getElementById("test").src=url
  }
</script>
<iframe src="http;\\www,widicommunity,com" frameborder="0" name="test" id="test" width=100% height=800 border="0" align="absbottom" marginwidth="1" marginheight="1"></iframe>
</p>
</html>

Lo de url lo entiendo, pero en el formulario ¿como defino url?

caricatos · #6 (**permalink**) 04/09/2009, 19:25

Hola:

Y por qué no pones en el action el destino, el target que apunte al iframe y un simple botón submit... y se queda hasta accesible...

Saludos

eilex · #7 (**permalink**) 05/09/2009, 07:21

Cita:

Iniciado por caricatos

Hola:

Y por qué no pones en el action el destino, el target que apunte al iframe y un simple botón submit... y se queda hasta accesible...

Saludos

Eso ya lo tengo, pero necesito que el destino sea el que se escriba en el campo de texto

caricatos · #8 (**permalink**) 05/09/2009, 09:45

Cita:

Iniciado por eilex

Eso ya lo tengo, pero necesito que el destino sea el que se escriba en el campo de texto

pues entonces puedes mover el valor del campo de texto al action del form...

onsubmit="this.action = texto.value; texto.disabled = true"

o si interesa la accesibilidad hacer una especie de CGI intermedio... con PhP de destino...

action="ir.php" -> header("Location: ".$_GET["texto"]);

Saludos