2010-10-21 44 views
7

Estoy trabajando en un pequeño proyecto en JavaScript/jQuery.Crear nueva ventana utilizando jquery

Con el fin de mostrar los resultados de un cálculo hecho en javascript, me gustaría abrir una nueva ventana con un cierto contenido predefinido y modificar este contenido con el fin de mostrar los resultados: Im usando código como este:

var resultwindow = window.open('result.html') 
var doc = $('body', resultwindow.document); 
doc.append("<p>Result</p>") 

Esto no funciona, ya que el documento de resultados aún no está cargado cuando anexo el contenido, por lo que se sobrescribe con el contenido de 'result.html'.

También probé

$(resultwindow.document).ready(function() { 
    // ... Fill result document here 
}) 

y

$(resultwindow.document).load(function() { 
    // ... Fill result document here 
}) 

pero ready() funcionan sólo en el documento actual (se llama de inmediato, si el documento actual ya está cargado), y no lo hace load ser llamado en absoluto.

Quizás alguien pueda indicarme la dirección correcta. ¡Gracias por adelantado!

EDITAR:

finalmente resuelto mediante la creación de un nuevo documento "a mano" en Javascript como:

w = window.open('','newwinow','width=800,height=600,menubar=1,status=0,scrollbars=1,resizable=1); 
d = w.document.open("text/html","replace"); 
d.writeln('<html><head>' + 
    '<link rel="stylesheet" type="text/css" href="style.cs"/></head>' + 
    +'<body></body></html>'); 
// use d to manipulate DOM of new document and display results 

Si tuviera que hacer lo mismo hoy (dos años de experiencia más adelante), usaría una biblioteca de plantillas de Javascript como Handlebars para mantener una plantilla y compilarla en javscript.

+0

Martin ¿lo consiguió? Tengo un problema similar. – Shaunak

+0

@Shaunak Publiqué mi solución de hace dos años como edición de la pregunta, también mencioné cómo la resolvería hoy ... hth. – MartinStettner

Respuesta

0

Envíe los datos a result.html en la cadena de consulta y luego haga que los resultados.html muestren los datos desde allí. Si quieres ser menos obvio al respecto, podrías analizar los datos en la cadena de consulta y hacer que la página de resultados lo deforme.

+0

El software también debe funcionar fuera de línea solo desde el sistema de archivos (es decir, sin ningún servidor web). Por lo tanto, su sugerencia no es una opción, creo. Gracias de cualquier manera. – MartinStettner

+0

No estoy seguro de por qué querría construir una página web o una serie de páginas web que en realidad no viven en algún tipo de servidor web. – Harv

1

El problema que tienes es que load() no hace lo que crees que hace.

En su lugar, utilice bind("load", function() { /* Your function here */ }); y luego todo debe trabajo.


Corrección:

load() es en realidad una función de doble uso - si se llama con una función como primer parámetro, a continuación, se une al evento de carga del objeto (u objetos) en cuestión, de lo contrario, carga los datos devueltos (si los hay) en los elementos en cuestión. Consulte la respuesta de Josh para real por lo que no está funcionando.

+1

Incorrecto. El ['load'] (http://api.jquery.com/load-event/) en jQuery es lo suficientemente inteligente. Se dispara en función de los parámetros que se ingresan. Por lo tanto, si solo ingresa una función, sabe que se refiere al evento de carga. Si pasa todos los parámetros necesarios para una llamada AJAX, lo hace. –

+0

Entonces, ¿está mal o es solo sintácticamente más largo? – Harv

+0

@Harv Está mal. La carga debería haber funcionado bien para el OP, y hay una razón por la que no lo hizo. Ver mi respuesta para una explicación detallada. –

2

Su llamada load no funciona porque está tratando de manejar la carga del document, y es probable que el documento no exista en este momento. Lo que significa que está pasando nulo a jQuery, y lo ignora con gracia. En su lugar, maneje el evento de carga de la referencia de ventana sin procesar, y entonces debería estar listo para continuar ...

var win = window.open("result.html"); 
$(win).load(function() { 
    $("body").append("<p>Result</p>"); 
}); 
+0

Desafortunadamente, nunca se llama al controlador de eventos. Además, el depurador revela que, al menos en Chrome, el objeto de documento ya existe pero está vacío ("sobre: ​​en blanco"). – MartinStettner

Cuestiones relacionadas