Continuando con el uso de JavaScript, aquí explico cómo podemos, a través de este lenguaje, hacer referencia a un elemento dentro de un iframe desde la página donde está definido el iframe.
Para comenzar, definiremos un iframe:
<iframe name="iframeXCambiar" src="iframe.html" height="50px"></iframe>
Como se observa en la definición del iframe, deberemos colocar un nombre al iframe, que en este caso es iframeXCambiar, así como el nombre del archivo al que haremos referencia en el iframe, y que aquí lo hemos llamado iframe.html. Recuerda que si lo pones de esta manera, estamos indicando que el archivo que contiene al iframe y el archivo al que hace referencia el iframe (iframe.html) deben estár colocados en el mismo directorio, sino es este el caso, puedes poner el URL del archivo para referirte al él.
Ahora crearemos el contenido del archivo iframe.html. Para este ejemplo, será un archivo muy sencillo:
<html>
<body>
<div id="divIframe" style="border: 1px solid #000000;">
Div dentro del iframe
</div>
</body>
</html><
Lo importante de esta parte, es la definición del div, ya que le colocamos un id llamado divIframe el cual nos permitirá acceder a su contenido y poderlo cambiar.
Ahora declararemos una función de javascript entre las etiquetas <head> y </head>. En esta función pondremos la instrucción que se encargará de modificar el valor del div llamado divIframe definido en el iframe.
<script>
function cambiarIframe()
{
frames.iframeXCambiar.document.getElementById('divIframe').innerHTML = "Nuevo texto del iframe";
}
</script>
En la declaración de la instrucción dentro de la función cambiarIframe, se puede ver que usamos el elemento frames y posteriormente usamos el nombre que le pusimos al iframe para poder manipular su div.
Ahora crearemos un botón que se encargue de llamar a la función de javascript para modificar el contenido del div dentro del iframe.
<input type="button" value="Cambiar" onClick="cambiarIframe();">
Hecho lo anterior, podremos ver nuestra página y presionar sobre el botón Cambiar para que ejecute la función y cambie el contenido del div.
Para observar como funciona este ejemplo, visiten esta página y presionen sobre el botón cambiar. Podrán ver como cambia el texto dentro del recuadro negro.
11 comentarios:
Hola
Como se hace un autocompletar en php y mysql
Hola, más que hacerlo con php y mysql, necesitaras hacerlo con algo de javascript, hay algunos toolkits que te ayudan con eso, aquí te pongo algunos:
DHTMLX
YUI
MooTools
Otros más
Espero que te serivan.
No entiendo como te sale... a mi me da "acceso denegado", seguramente será porque estoy intentando hacerlo a otro server...
hola héctor valverde, como comentas, es muy posible que el problema sea porque lo estas haciendo a otro servidor, igual y si pones tu código, podríamos ver que es lo que sucede.
hola q tal
¿podrìas manejar algo màs relacionado al desarrollo con aplicaciones javascript?
Tengo el problema con un sitio, en el que valido campos y uno de ellos es un select multiple.
Este select lo manejo como array (objeto).
Cuando inserto el còdigo para validarlo, porque quiero que se hayan seleccionado al menos 2 opciones (y tambièn en un futuro quiero que sean màximo 3), no acepta el còdigo. Es decir, dentro del mismo còdigo de validaciòn tambièn intento utilizar el array, pero al momento de enviar los datos en la pàgina, no valida nada y manda todo vacìo.
He probado de varias formas y el error tambièn consiste en que al insertar cualquier tipo de còdigo referente a mi array(select multipl), no toma en cuenta nada y no hay ninguna validaciòn.
Ayúdame por favor.
Gracias.
Hola, estaría bien que pusieras la forma en que estás declarando tu select multiple en html, así de la misma manera, cómo estás tratando de manipular con javascript este select. Esto con el fin de entender más por donde podría estar tu problema.
Saludos!!!
ok, aquì està el código:
html
head>title>prueba multiple /title>
script language="javascript" type="text/javascript">
function v(s){
if (s['dias[]'].selectedIndex!=-1){
return true;
}else{
alert("Debes seleccionar al menos 2 opciones");
return false;
}
}
/script>
/head>
body>
FORM METHOD="POST" ACTION="mostra.php" name="admin" onsubmit='return v(this);'>
select name="dias[]" size=6 multiple>
option value=L>Lunes/option>
option value=M>Martes/option>
option value=Mc>Miércoles/option>
option value=J>Jueves/option>
option value=V>Viernes/option>
option value=S>Sábado/option>
/select>
input type="submit" value="Enviar"/>
/form>
/body>
/html>
Aislé el problema, pues necesito que trabaje con otros elementos de formulario, en donde valida cajas de texto exitosamente.
No sé si exista la posibilidad de insertar una funciòn dentro de otra, porque lo he probado y no lo logré; fallò todo.
Debo aclarar que necesito que mi select sea manipulado como array y ésto es lo que me ha generado conflicto. El código de arriba, me permite el uso de corchetes (array) pero solo maneja una opción validada.
A continuaciòn agrego el código que encontré para validar dos opciones pero, no permite el uso de corchetes:
html>
title>Prueba de dias/title>
head>
script language="javascript" type="text/javascript">
function contar (objetoSelectMultiple){
var seleccionadas = 0
for (var i=0; i< objetoSelectMultiple.options.length; i++) {
if (objetoSelectMultiple.options[i].selected)
seleccionadas++;
}
if (seleccionadas<2){
alert ("No ha seleccionado ninguna opcion");
return false;
}
else {
document.admin.submit();
}
}
/script>
/head>
form METHOD="POST" ACTION="mostra.php" name="admin">
TABLE>
TR>
td>
select name="dias" size=6 multiple>
option value=L>Lunes/option>
option value=M>Martes/option>
option value=Mc>Miércoles/option>
option value=J>Jueves/option>
option value=V>Viernes/option>
option value=S>Sábado/option>
/select>
/td>
/TR>
td>
p>br> center>
INPUT TYPE="button" VALUE="Cuantos seleccionados" onclick=contar(document.admin.dias) />
/td>
td>
/tr>
/TABLE>
/FORM>
html
Muchas gracias de antemano.
Espero puedas ayudarme.
Saludos!
**quité el símbolo de apertura de etiquetas, pues el sitio no me permitía publicar la entrada, espero sea entendible, también intenté agregarlo como imagen pero tampoco lo permite.
1 - Al elemento <select> le tendrías que asignar id="dias"
de manera que quede algo así:
<select id="dias" name="dias[]"...
2 - luego a la funcion v() de validar no hace falta que le pases el formulario por parámetro (quita el this en el onsubmit en vez de "return v(this)" pon "return v()").
3 - la hago sin probarla pero o funcionará ya o no tendrás que cambiar mucho, es para que pilles la idea:
function v(){
var select = document.getElementById('dias');
var num_selects = 0;
for (i=0; i < select.options; i++)
if (select.options[i].selected){
num_selects++
}
}
if (num_selects > 1) {
return true;
}else{
alert("Debes seleccionar al menos 2 opciones");
return false;
}
}
Saludos
Gracias por responder JepRubio, me parecen buenas tus observaciones espero que puedan servir.
Perdón por no responder, últimamente he tenido que dejar un poco el blog, pero ya lo voy a ir retomando.
EXCELENTE Señor, una respuesta muy buena y un ejemplo muy sencillo que muestra el punto. Gracias.
does not work in chrome :(
Publicar un comentario