Como cerrar una ventana (Frame) con JavaScript

jhonnysoft · #1 (**permalink**) 11/01/2005, 15:06

Hola a todos. Disculpen la molestia, pero necesito solucionar un pequeño problema. Si alguno sabe como cerrar un Frame o un conjunto de marcos con tan solo hacer click en un boton de un formulario que esta dentro del frame con codigo JavaScript......plis

Wilmer · #2 (**permalink**) 11/01/2005, 16:07

Hola, JhonnySoft.

Te cuento que padecí el mismo problema hace algún tiempo y he aquí la solución que un compañero del foro me dió:

El siguiente ejemplo, "oculta" el frame izquierdo de la ventana al hacer click sobre un determinado icono, luego establece como fuente del frame derecho el mismo icono seleccionado.

Primero, copia el siguiente código en una página html en blanco (mi_ejemplo.html). Esto creará una página con dos frames.

<html><head></head>
<frameset name="pag" cols="200,*" frameborder="1">
<frame name="a" src="a.html"></frame>
<frame name="b" src="about:blank"></frame>
</frameset><noframes></noframes></html>

==========

Luego, crea una página llamada a.html y en ella copia el siguiente código:

<html>
<head>
<script language="JavaScript">
function A(s)
{
parent.document.getElementById("pag").cols="0,*";
parent.document.getElementById("b").src=s;
}
</script></head><body>
<img src="icono1.gif" onClick="A(this.src);">
<img src="icono2.jpg" onClick="A(this.src);">
<img src="icono3.gif" onClick="A(this.src);">
</body>
</html>

Nota: asegúrate de poner todo en la misma carpeta (directorio) y además, pon tres imágenes pequeñas, las que quieras y nómbralas como icono1.gif, etc.

Finalmente, ejecuta la página mi_ejemplo.html

Me avisas cómo te fue!

KarlanKas · #3 (**permalink**) 12/01/2005, 02:35

Si, por si acaso, quieres cerrar toda la ventana de un plumazo. pon:

<input type="button" onclick="top.close();" value="cerrar todo" />

jhonnysoft · #4 (**permalink**) 12/01/2005, 08:00

Realmente me ha servido de mucho tu aporte Wilmer aunque quería que cierre toda la ventana de una sola. Pero lo que tu me mandaste me sirve de mucho para lo que yo quería hacer mas adelante, es más me ahorraste trabajo porque iba a escribir un nuevo tema.................. gracias (te pasaste)

jhonnysoft · #5 (**permalink**) 12/01/2005, 08:03

Gracias KarlanKas por robarte un poco de tu tiempo, realmente me fue de mucha utilidad para lo que quería hacer muchas gracias y hasta pronto.......bye

masterboy6666 · #6 (**permalink**) 12/01/2005, 08:32

Muchas Graccias Wilmer, retomare el hilo que se esta siguiendo en este tema(como me lo sugeriste en el tema que yo abri) ahora me falta la parte de volver a mostrar el frame, por que el de cerrar es excelente. Yo hice una funcion , pero no me funciona al momento de abrir el frame, queda un poco mas chico, podrian revisarlo e indicarme el error.

<html>
<head>
<script language="JavaScript">
function A(s)
{
parent.document.getElementById("pag").cols="0,*";
parent.document.getElementById("b").src=s;
}
function B(s)
{
parent.document.getElementById("pag").cols="20%,*" ;
parent.document.getElementById("b").src=s;
}

</script></head><body>
<img src="icono1.gif" onClick="A(this.src);">
<img src="icono2.jpg" onClick="A(this.src);">
<img src="icono3.gif" onClick="B(this.src);">
</body>
</html>

Lo unico que cambie fue que se utilizaran porcentajes.

Otra pregunta este codigo es compatible para todos los navegadores o para variar solo funciona con el IE.

Gracias a todos.

masterboy6666 · #7 (**permalink**) 12/01/2005, 08:41

Hice pruebas y no me funciono bien en el opera, pero en lugar de poner
<frameset name="pag" cols="20%,*" frameborder="1">

funciono correctamente

<frameset id="pag" cols="20%,*" frameborder="1">

ya solo me falta que me ayuden con lo anterior.

Gracias.

Wilmer · #8 (**permalink**) 12/01/2005, 09:47

hola, aquí te mando un nuevo código que puedes guardar en un archivo (*.js).
este código muestra y oculta el frame izquierdo ante el evento clic de un mismo icono al cual se le puede cambiar su fuente y hasta su mensaje de tooltip.

Básicamente lo que se hace es jugar con el tamaño de los frames.

======
Copia este código en un archivo js (ej: framesettings.js).

var sw = 0;

function A(s)
{
var rcFile = new Array();
rcFile = s.split("/");
var imagen = rcFile[rcFile.length - 1];
var imgObj=document.getElementById('cntMosOcul');
if (imagen == 'activo.jpg' && sw == 0) {
parent.document.getElementById('aqui').cols="0,*";
imgObj.src="inactivo.jpg";
imgObj.alt="Mostrar frame izquierdo";
sw = 1;
}
else if (imagen == 'inactivo.jpg' && sw == 1) {
parent.document.getElementById('aqui').cols="20%,* ";
imgObj.src="activo.jpg";
imgObj.alt="Ocultar frame izquierdo";
sw = 0;
}
}

====================
Ahora, copia este código en un archivo html (barrasuperior.htm) donde se alojará la página del frame superior.

<HTML><HEAD><TITLE>Frame superior</TITLE>
<script language="JavaScript" src="framesettings.js"></script>
</HEAD>
<BODY>

<img src="activo.jpg" alt="Ocultar frame izquierdo" width="17" height="17" id="cntMosOcul" onClick="A(this.src);" style="cursor=hand">

</BODY></HTML>

========

Y por último, copia este código en una página que contenga los frames. (misframes.htm).

<html>
<title>Mis Frames</title>
<frameset name="ahora" rows="70,*" cols="*" frameborder="NO" border="0" framespacing="0">
<frame src="barrasuperior.htm" name="top1Frame" scrolling="NO" noresize >
<frameset name ="aqui" cols="20%,*" frameborder="YES" border="0" framespacing="0">
<frame src="izquierdo.htm" name="leftFrame" scrolling="AUTO" resize>
<frame src="derecho.htm" name="mainFrame" scrolling="AUTO" resize>
</frameset>
</frameset>
<noframes></noframes>
</html>

Nota: No olvides crear las páginas izquierdo.htm y derecho.htm que contengan lo que quieras, para efectos de las pruebas.

Al finalizar deberás tener los siguientes archivos en el mismo directorio (bueno, luego puedes jugar con direccionamientos, pero por ahora dejémolo así):

framesettings.js
barrasuperior.htm
misframes.htm
izquierdo.htm
derecho.htm
activo.jpg
inactivo.jpg

Y ejecutas el archivo misframes.htm para ver el resultado.

Espero que haya sido útil para lo que realmente buscabas!

Cordialmente,

WILMER

masterboy6666 · #9 (**permalink**) 12/01/2005, 14:53

Excelente codigo, me sirvio a la perfeccion Wilmer, hasta funciono con Opera que antes no funcionaba.

Muchas, pero muchas gracias, me sacas de un apuro que tenia con la realizacion de u proyecto.