Geek Answers Handbook

Create a new window using jquery

I am working on a small project in JavaScript / jQuery.

To display the results of a calculation performed in javascript, I would like to open a new window with some predefined content and change this content to display the results: Im using this code:

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

This does not work because the resulting document is not yet loaded when the content is added, so it is overwritten with the contents of "result.html".

I also tried

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

and

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

but ready() only works with the current document (it is called immediately if the current document is already loaded), and load is not called at all.

Maybe someone can point me in the right direction. Thanks in advance!

EDIT

I finally solved this by creating a new document "manually" in Javascript, for example:

 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

If I did the same today (two years of experience later), I would use some Javascript template library, such as Handlebars , to save the template and compile it into javscript.

+7
javascript jquery
source share
3 answers

Your load call does not work because you are trying to handle the document load, and the likelihood that the document does not even exist at the moment. This means that you pass null to jQuery and it gracefully ignores you. Instead, handle the event of loading a link to the original window, and then you should be good to go ...

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

The problem is that load() does not do what you think.

Instead, use bind("load", function() { /* Your function here */ }); then everything should work.

Correction:

load() is actually a dual-purpose function - if it is called with the function as its first parameter, then it binds it to the event of loading the object (or objects), otherwise it loads the returned data (if any) into the elements in question . See Josh's answer for the real reason why it doesn't work.

+1
source share

Send the data to result.html in the query string, and then display the result.html data. If you want to be less obvious about this, you can hash the data in the query string and display the results page.

0
source share

More articles:


All Articles