Working with Pop Ups and Browser Windows in JavaScript
This series of articles mainly concentrates on working with browser windows and sub-windows in JavaScript. You can reuse these scripts to inject into server side controls easily (especially in .NET and Java).
Working with Pop Ups and Browser Windows in JavaScript - How to write to a pop up window dynamically using JavaScript (Page 2 of 5 )
Now, let us try to develop a simple script (JavaScript) which writes some information dynamically to a pop up window. Have a look at the following code:
<html> <head> <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5"> <script id="clientEventHandlersJS" language="javascript"> <!-- // global variable for subwindow reference var w; function openNewWindow( ) { if (!w || w.closed) { w = window.open("","NewWindow","status,height=200,width=300"); // delay writing until window exists in IE/Windows setTimeout("openNewWindow( )", 50); } elseif (w.focus) { // window is already open and focusable, so bring it to the front w.focus( ); } // assemble content for new window var c = document.all.txtHTML.value; // write HTML to new window document w.document.write(c); w.document.close( ); // close layout stream }
function Button1_onclick() { openNewWindow(); } //--> </script> </head> <body> <form id="form1"> Enter HTML:<textarea id="txtHTML"><html><head><title>My sub Window</title></head><body>This is some sample information</body></html></textarea><br> <input type="button" value="Show" id="Button1" name="Button1" onclick="return Button1_onclick()"> </form> </body> </html>
This is one of the interesting concepts pertaining to the use of pop up windows. Until now we had been trying to fetch an already existing web page into a pop up window. We didn't really write our own information dynamically into the pop up window. This section does the same.
The following are the three statements which do the job:
var c = document.all.txtHTML.value; w.document.write(c); w.document.close( );
We are trying to retrieve the information available in "txtHTML" (a text box) in the first statement. We write the same information to the window using the second statement. You should observe that the variable "w" has been declared global, so that I can use it in any JavaScript function related to that web page.