[SOLUCIONADO] ¿Cómo escribir código javascript dentro de una nueva ventana creada con javascript??

berkeleyPunk · #1 (**permalink**) 16/04/2013, 12:16

Estoy creando un sitio que se vuelve cada vez más complejo y ahora me encuentro con esta bronca.

En el documento A.html tengo el siguiente HTML:

Código HTML:

<input type="button" value="Abrir nueva ventana!" onclick="abrirVentana()" />

Cuando se le da clic a este botón se ejecuta la siguiente función javascript que abre una nueva ventana:

Código Javascript:

Ver originalfunction abrirVentana()
    {
        var ventana = window.open('', 'ventana', 'width=640, height=480');
        ventana.document.write('<head><title>Título nueva ventana</title></head>');
        ventana.document.write('<body>');
        ventana.document.write('<div id="contenedor">');
        ventana.document.write('<input type="button" value="Cerrar la nueva ventana" onclick="cerrarNuevaVentana()" />');
        ventana.document.write('</div>');
        ventana.document.write('</body>');
    }

Lo que quiero hacer es que al dar clic en el botón contenido en esta nueva ventana, se ejecute una función javascript, la que sea, no importa, por ejemplo, una que cierre esta misma ventana. Para esto, el código javascritpt anterior no me sirve, porque sólo crea la nueva ventana, y ésta no tiene nada, excepto un botón miserable que no va a ejecutar nada porque dentro de esa nueva ventana no hay código javascript qué ejecutar.

Se me ocurrió que puedo escribir código javascript dentro de esa nueva ventana empleando el mismo document.write al momento de crear esa nueva ventana. Entonces, modifico el código javascript anterior de esta manera:

Código Javascript:

Ver originalfunction cerrarNuevaVentana()
    {
        var ventana = window.open('', 'ventana', 'width=640, height=480');
        ventana.document.write('<head><title>Título de nueva ventana</title>');
        ventana.document.write('<script type="text/javascript">');
        ventana.document.write('function cerrarNuevaVentana()');
            ventana.document.write('{');
            ventana.document.write('Aquí el código de la función');
            ventana.document.write('}');
            ventana.document.write('</script>');
        ventana.document.write('</head>');              
    ventana.document.write('<body>');
        ventana.document.write('<div id="contenedor">Contenido del div contenedor</div>');
    ventana.document.write('<input type="button" value="Quitar div contenedor!" onclick="borrarContenidoDeNuevaVentana()" />');
        ventana.document.write('</body>');
    }

Pero no funciona!

Cuando ejecuto el archivo A.html, el cual contiene la función abrirVentana(), en pantalla aparece parte del código javascript. Lo que indica que no es posible escribir código javascript dentro de document.write.
¿Cómo #$%&#$ le hago entonces para que la nueva ventana ejecute una función cualquiera?

David · #2 (**permalink**) 16/04/2013, 12:32

Si el script está en un archivo aparte probablemente podrás.

De todos modos, puedes hacerlo más sencillo:

Código Javascript:

Ver originalfunction cerrarNuevaVentana(obj)
{
    obj.close();
}
 
function abrirVentana()
    {
        var ventana = window.open('', 'ventana', 'width=640, height=480');
        ventana.document.write('<head><title>Título nueva ventana</title></head>');
        ventana.document.write('<body>');
        ventana.document.write('<div id="contenedor">');
        ventana.document.write('<input type="button" value="Cerrar la nueva ventana" onclick="opener.cerrarNuevaVentana(window)" />');
        ventana.document.write('</div>');
        ventana.document.write('</body>');
    }

maycolalvarez · #3 (**permalink**) 16/04/2013, 12:35

aunque considero que no es la mejor forma, si se puede, el detalle es que tienes que escapar las comillas, porque evidentemente al escribir código js con js el parser se confunde.

es más, lo mejor es concatenar todo el código js en una variable, y volcarlo todo de una vez con write, es solo saber manejar la salida de los datos.

berkeleyPunk · #4 (**permalink**) 16/04/2013, 12:53

Cita:

Iniciado por David

Si el script está en un archivo aparte probablemente podrás.

De todos modos, puedes hacerlo más sencillo:
[HIGHLIGHT="Javascript"]
function cerrarNuevaVentana(obj)
{
obj.close();
}
...

¿Me estás diciendo que la nueva ventana sí reconoce las funciones declaradas en el documento principal , y que por esto mismo no es necesario escribir funciones en la nueva ventana? Ahorita mismo lo intento, regreso y comento!

David · #5 (**permalink**) 16/04/2013, 13:26

Sí, con el detalle de que para llamar a la función tienes que hacerlo de la forma opener.nombreFuncion() ya que opener hace referencia a la ventana que abrió el popup.

berkeleyPunk · #6 (**permalink**) 16/04/2013, 14:31

Cita:

Iniciado por David

Sí, con el detalle de que para llamar a la función tienes que hacerlo de la forma opener.nombreFuncion() ya que opener hace referencia a la ventana que abrió el popup.

Vaya, carajo! Cuando me salió el problema pensé en llamar una función en A.html desde la nueva ventana, pero dije: "No creo que funcione, después de todo, es una nueva ventana y no hay sesión abierta".

Como sea, creo que lo más sencillo y recomendable es hacer lo que mencionaste hace rato: crear un archivo funciones.js y allí meter todas las funciones, después en la nueva ventana llamar a funciones.js con un include y listo (espero que sea tan fácil!).

Desgraciadamente, ya no puedo dejar de pensar en el ejemplo que pusiste con el OPENER, el problema es que no pude encontrarle la forma para que funcione con otras funciones. Ya ejecuté tu código y funciona a la perfección con la función cerrarVentana. He intentado llamar otras funciones, pero ya no funciona porque las intrucciones de estas otras funciones son muy distintas.

Función cerrar ventana automáticamente:

Código Javascript:

Ver originalfunction cerrarVentanaAuto()
  {
      setTimeout("window.close()", 3000);
  }

y función eliminar el único div de la nueva ventana:

Código Javascript:

Ver originalfunction borrar()
  {
        var hijo = document.getElementById("contenedor");
        var padre = hijo.parentNode;
        var removerHijo = padre.removeChild(hijo);
  }

Juro por mi madre que ya le moví para ver si jalan estas funciones en la nueva ventana, poniendo y quitando tu variable OBJ y el OPENER, pero nada de nada.

Imagino que sabiendo cómo hacer que sirvan estas funciones, podré arreglarmelas después con otras.

Gracias David.

David · #7 (**permalink**) 16/04/2013, 14:47

Verás que en ese contexto document se refiere al documento en la ventana principal; puedes usar obj.document si pasas como parámetro la ventana abierta como en el ejemplo.

berkeleyPunk · #8 (**permalink**) 16/04/2013, 15:52

Cita:

Iniciado por maycolalvarez

aunque considero que no es la mejor forma, si se puede, el detalle es que tienes que escapar las comillas, porque evidentemente al escribir código js con js el parser se confunde.

es más, lo mejor es concatenar todo el código js en una variable, y volcarlo todo de una vez con write, es solo saber manejar la salida de los datos.

Tampoco resulta la forma como dices MAY, ese Maaaay!

1. Metí todo el código javascript tal cual en una variable y nada.
2. Metí todo el código javascript en una variable y escapé casi cada caracter con &..., y nada.
3. Puse un input text de tal modo que el value fuera el código javascript, y después recoger este value en una variable y así meterlo en la nueva ventana y nada. Así:

Código Javascript:

Ver originalfunction abrirVentana()
    {
        var ventana = window.open('', 'ventana', 'width=640, height=480');
        ventana.document.write('<head><title>Título nueva ventana</title>' + codigo + '</head>');
        ventana.document.write('<body>');
        ventana.document.write('<div id="contenedor">');
        ventana.document.write('<input type="button" value="Cerrar la nueva ventana" onclick="opener.cerrarNuevaVentana(window)" />');
        ventana.document.write('</div>');
        ventana.document.write('</body>');
    }

En este caso, en la nueva ventana se despliega en pantalla la palabra UNDEFINED. Supongo que aparece esto porque el intérprete no sabe qué clase de contenido tiene la variable CODIGO, si es de tipo numérico, booleano... No se por qué dice que la variable es indefinida si la variable se decalra con comillas, lo que implica que es una variable de cadena. Bueno, como sea, no funciona!
Ayuda!
David respondió satisfactoriamente a mi pregunta inicial.
El problema ahora es más general, cómo llamar cualquier función desde una nueva ventana! Ya hice lo que comenta el deivid, crear un archivo funciones.js y poner allí todas las funciones, después llamarlas desde la ventana pero tampoco jala.

David · #9 (**permalink**) 16/04/2013, 16:10

Si definitivamente quieres hacerlo de esa manera en lugar de usar las funciones de la ventana principal, solo tienes que evitar colocar directamente la etiqueta <script> para no confundir al parser:

Código Javascript:

Ver originalventana.document.write('<scr' + 'ipt type="text/javascript">alert("Hello");</scr' + 'ipt>');

berkeleyPunk · #10 (**permalink**) 16/04/2013, 17:18

Cita:

Iniciado por David

Si definitivamente quieres hacerlo de esa manera en lugar de usar las funciones de la ventana principal, solo tienes que evitar colocar directamente la etiqueta <script> para no confundir al parser:

Código Javascript:

Ver originalventana.document.write('<scr' + 'ipt type="text/javascript">alert("Hello");</scr' + 'ipt>');

Sé que soy una lata y que esto es cansado, pero no sale!
Bueno, sí sirve el código que dices, David, sacar el alert de esa forma. Perfecto

.
Pero si pones una función, entonces no funciona. Por ejemplo:

Código Javascript:

Ver originalventana.document.write('<scr' + 'ipt type="text/javascript"> function cerrarVentanaAuto() {setTimeout("window.close()", 1000);} </scr' + 'ipt>');

Por otro lado, no es que quiera empecinarme en llamar una función de esta forma (metiendo el código dentro de document.write). De hecho, cualquier forma es bienvenida, pero que sirva! Inicialmente tú pusiste un código (con la var OBJ y el OPENER) que ejecutó perfectamente una función. Y eso es lo que quiero, el problema es que no sé cómo adecuar ese OBJ y OPENER para ejecutar otras funciones (que ya puse más arriba, las de cerrarVentanaAuto y borrar)

Porque no es tan sencillo como poner opener.nombreFuncion() dentro de un onload u onclick. Ya lo hice así y no jala (excepto en el ejemplo que pusiste de cerrar ventana haciendo clic en un botón).

emprear · #11 (**permalink**) 16/04/2013, 20:19

Tenés muchas posibilidades. Lo primero que te recomiendo, e que para generar el código javascript utilices esta herramienta

http://foros.emprear.com/javascript/...s/html2js.html

Aqui un ejemplo
la ventana padre

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Generar ventana javascript</title>
<script type="text/javascript">
//<![CDATA[
var nventana= null;
function nvf(){
var winleft = (screen.width-600)/2;
var wintop = (screen.height-250)/2;
nventana = window.open('','nombreVentana','toolbar=no,location=no,top='+wintop+',left='+winleft+',scrollbars=no,status=no,width=700,height=450');
var strVar="";
strVar += "<!DOCTYPE html>";
strVar += "<html lang=\"es-ar\">";
strVar += "<head>";
strVar += "<meta charset=\"utf-8\" \/>";
strVar += "<title>NuevaVentana<\/title>";
strVar += "<link rel=\"stylesheet\" type=\"text\/css\" href=\"estilos.css\" media=\"screen\" \/>";
strVar += "<style type=\"text\/css\">";
strVar += ".verde{";
strVar += "background:green;";
strVar += "}";
strVar += "<\/style>";
strVar += "<script type=\"text\/javascript\">";
strVar += "function cambiarColor(){";
strVar += "document.getElementById(\"roja\").style.background = \"blue\";";
strVar += "}";
strVar += "<\/script>";
strVar += "<script type=\"text\/javascript\" src=\"fncs.js\"><\/script>";
strVar += "<\/head>";
strVar += "<body>";
strVar += "<div id=\"contenedor\">";
strVar += "<input type=\"button\" value=\"Cerrar la nueva ventana\" onclick=\"self.close();\" \/><br \/>";
strVar += "<input type=\"button\" value=\"Cambiar Roja por Azul\" onclick=\"cambiarColor();\" \/><br \/>";
strVar += "<input type=\"button\" value=\"Cambiar fondo del opener a lime con una función definida en el mismo\" onclick=\"opener.cambiaFondo();\" \/><br \/>";
strVar += "<input type=\"button\" value=\"Poner un nombre en en el campo de texto inferior utilizando una función en un archivo externo (fncs.js)\" onclick=\"cambiaNombre();\" \/><br \/>";
strVar += "<\/div>";
strVar += "<div class=\"verde\">verde<\/div>";
strVar += "<div id=\"roja\">roja<\/div>";
strVar += "Nombre: <input type=\"text\" value=\"\" id=\"nombre\" \/><br \/>";
strVar += "Número: <input type=\"text\" value=\"\" id=\"numero\" \/>";
strVar += "<\/body>";
strVar += "<\/html>";
nventana.document.write(strVar);
}
 
function cambiaFondo(){
document.body.style.background = "lime";
}
function valor_a_hija(n){
if(parseInt(navigator.appVersion) >= 4){nventana.window.focus();}
nventana.document.getElementById('numero').value = n;
}
 
//]]>
</script>
</head>
<body>
<button onclick="nvf();">Generar nueva ventana</button><br />
<button onclick="valor_a_hija(25);">Pasar número a hija (presionar primero el botón anterior para generar la ventana</button><br />
<button onclick="nvf();setTimeout('valor_a_hija(50)',5000);">Crear ventana hija y pasarle un número (cerrar la nueva ventana si está abierta),<br />
utilizamos setTimeuot para pasar el valor para dar tiempo a que se genere la ventana</button>
</body>
</html>

el css externo llamado en la ventana hija
estilos.css

Código CSS:

Ver original#roja{
background: red;
}

el js externo llamado en la ventana hija
fncs.js

Código Javascript:

Ver originalfunction cambiaNombre(){
document.getElementById("nombre").value = "Emprear";
}

Demo funcionando
http://foros.emprear.com/javascript/...r_ventana.html

Esto sería lo básico, hay muchas otras variantes.
Es importante que el html con el que vas a crear la nueva ventana esté bien hecho,
Saludos

berkeleyPunk · #12 (**permalink**) 17/04/2013, 10:54

Cita:

Iniciado por emprear

Tenés muchas posibilidades. Lo primero que te recomiendo, e que para generar el código javascript utilices esta herramienta

[url]http://foros.emprear.com/javascript/generador_html_js/html2js.html[/url]
...
...
...

Una vez más, el Maestro Emprear tenía que resolver uno de mis problemas con javascript. Qué pasó, cómo estás compañero!

Estuve revisando el código que pones aquí arriba, y vi que en el fondo, toda la bronca nace al no escapar comillas, como decía el may (maycolalvarez). Pero no sólo las comillas, también las diagonales. Y con eso, el parser ya no se confunde con dónde empieza y dónde acaba el código de la función de la ventana padre...

El ejemplo que pones es amplio, y estudiándolo bien, permite aprender cómo interactúan las ventanas padre e hija.

Aprendí de tu código y ahora sí puedo ejecutar la función que yo quería que se ejecutara en la ventana hija, a saber, una función que contuviera un setTimeout:

Código HTML:

Ver original<input type="button" value="Abrir nueva ventana!" onclick="abrirVentana()" />

Y

Código Javascript:

Ver originalfunction abrirVentana()
    {
        var ventana = window.open("", "ventana1", "width=300, height=200, scrollbars=no");
        var strVar  = "";
        
        strVar = strVar + "<head>";
        strVar = strVar + "<title>Ésta es una nueva ventana<\/title>";
        strVar = strVar + "<script type=\"text\/javascript\">";
        strVar = strVar + "function cerrarVentana()";
        strVar = strVar + "{";
        strVar = strVar + "window.close()";
        strVar = strVar + "}";
        strVar = strVar + "function cerrarVentanaAuto()";
        strVar = strVar + "{";
        strVar = strVar + "setTimeout(\"window.close()\", 3000)";
        strVar = strVar + "}";
        strVar = strVar + "<\/script>";
        strVar = strVar + "<\/head>";
        strVar = strVar + "<body onload=\"cerrarVentanaAuto()\">";
        strVar = strVar + "<input type=\"button\" value=\"cerrar ventana\" onclick=\"cerrarVentana()\" />";
        strVar = strVar + "<input type=\"button\" value=\"cerrar ventana después de 3 segs\" onclick=\"cerrarVentanaAuto()\" />";
        strVar = strVar + "<\/body>";
        
        ventana.document.write(strVar);
    }

Dos cosas más y doy por solucionado este post, que de seguro le servirá a mucha gente.

1. En la ventana hija, si le doy clic al botón "cerrar ventana después de 3 segs", se ejecuta la función pertinente a la perfección. Pero si hago que se ejecute dicha función al cargarse esta ventana nueva, con el onload, no funciona. ¿Por qué?
2. Más exactamente, cómo funciona la herramienta que pones en el enlace http://foros.emprear.com/javascript/...s/html2js.html ?

.

emprear · #13 (**permalink**) 17/04/2013, 15:06

La herramienta simplemente escapa los caracteres reservados. El original no es mío, solo le adapté el tema de la variable. Y siempre es recomendable que escribas tu html y el js contenido de manera ordenada
Con respecto a lo del cierre onload, no lo sé con seguridad, pero evidentemente está relacionado de la manera que cada navegador trata el objeto window.
Fijate por ejemplo. en IE no se cierra, pero si le das a recargar la página, si, en FF no se cierra, pero si hacés click derecho ni siquiera te muestra la opción recargar.
De todas formas encontré una forma alternativa para el cierre automático onload con setTimeout, y es la siguiente, antes del cierre del body (funciona en todos los que probé, FF,IE,Chrome)

Código:

strVar = strVar + "<script>setTimeout(\"window.close()\", 5000);<\/script><\/body></html>";

tampoco hace falta encerrarlo en una función, en la demo anterior agregué un botón extra para que verifiques, le doy un poco más de margen para dar tiempo a que se prueben los otros botones.
Saludos