Create new window using jquery
I'm working on a little project in JavaScript/jQuery.
In order to display results from a calculation done in javascript, I'd like to open a new window with some predefined content and modify this content in order to display the results: Im using code like this:
var resultwindow = window.open('result.html')
var doc = $('body', resultwindow.document);
doc.append("<p>Result</p>")
This is not working since the result docum开发者_开发百科ent is not yet loaded when I append the content, 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() works only on the current document (it is called immediately, if the current document is already loaded), and load doesn't get called at all.
Perhaps someone can point me to the right direction. Thanks in advance!
EDIT:
I finally solved this by creating the new document "by hand" in Javascript like:
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 were to do the same thing today (two years of experience later), I'd use some Javascript template library like Handlebars to maintain a template and compile it to javscript.
Your load call doesn't work because you're attempting to handle the load of the document, and chances are document does not even exist at this point. Which means you are passing null into jQuery, and it gracefully ignores you. Handle the load event of the raw window reference instead, and then you should be good to go...
var win = window.open("result.html");
$(win).load(function() {
$("body").append("<p>Result</p>");
});
The problem you have is that load() doesn't do what you think it does.
Instead, use bind("load", function() { /* Your function here */ }); then everything should work.
Correction:
load() is actually a dual-use function -- if it's called with a function as its first parameter, then it binds it to the load event of the object (or objects) in question, otherwise it loads the returned data (if any) into the elements in question. See Josh's answer for the real reason why it's not working.
Send the data to result.html in the querystring and then have the result.html display the data from there. If you want to be less obvious about it going through you could hash the data in the querystring and have the result page dehash it.
加载中,请稍侯......
精彩评论