Writing to a popup window

When you open a new browser window or Popup you can write directly into that window instead of loading a page into it.
This is done by using document.write.

Even though you are not stating a page to be loaded you must still incude those single quotes.
windowHandle=window.open('','windowname','attributes')

When you open an empty window a blank default document is assigned to the window, click the following link and view the source of the document.

Open Window

As you will see only the HTML tags are present in this default document.

Although you can write to this document only what you require it is good practise to include all the tags that you would normally find in a document.

<script type="text/javascript">
<!--
function loadWin1() {
var newWin1=window.open('', 'win0','width=350,height=225,left=50,top=150,menubar=yes')
newWin1.document.open()
newWin1.document.write('<html>'\n)
newWin1.document.write('<head>\n')
newWin1.document.write('<title>Write to Popup</title>\n')
newWin1.document.write('</head>\n')
newWin1.document.write('<body>\n')

newWin1.document.write('Your contents go here.')

newWin1.document.write('</body>\n')
newWin1.document.write('</html>\n')
newWin1.document.close()
}
//-->
</script>

Click the following link and view the source of the document.

Open Window

In addition to the document.write() I have included 2 more statements these are document.open() and document.close().

Press buttons 1 and 2, numerous times, and notice what happens in the popup.

For that example I did not include document.open() or document.close(), although the document will be open by default it is not necessarily closed.

Now press buttons 3 and 4.

Closing the document would allow you to write new content to the same popup instead of adding to the current content.


The next example includes a script that was written to the window

Open PopUp

<script type="text/javascript">
<!--
function loadWin2() {
var newWin2=window.open('', 'win1','width=350,height=225,left=50,top=150,menubar=yes')
newWin2.document.open()
newWin2.document.write('<html>\n')
newWin2.document.write('<head>\n')
newWin2.document.write('<title>Write to Popup</title>\n')

newWin2.document.write('<script>\n')
newWin2.document.write('<!--\n')
newWin2.document.write('function alertBox(){\n')
newWin2.document.write('alert("Hello There")\n')
newWin2.document.write('}\n')
newWin2.document.write('//-->\n')
newWin2.document.write('<\/script>\n')

newWin2.document.write('</head>\n')
newWin2.document.write('<body bgcolor="#00FF00">\n')

newWin2.document.write('<font color="#0000FF">Your contents go here.<br>\n')
newWin2.document.write('<font color="#0000FF">I have included an image and a script.\n')
newWin2.document.write('<P><img src="/chicken.gif" height=120 width=100 border=1 align=right>\n')
newWin2.document.write('<P><hr><P>\n')
newWin2.document.write('<INPUT type=button value="A Working Button" onclick="alertBox()">\n')
newWin2.document.write('<P><hr><P>\n')
newWin2.document.write('View the source to see how this has been written\n')

newWin1.document.write('</body>\n')
newWin1.document.write('</html>\n')
newWin2.document.close()
}
//-->
</script>

<a href="#null" onclick="loadWin2()">Open PopUp</a>



NOTE:
You may have noticed in the example codes on this page that I have used the 2 characters \n (backslash n), this denotes a new line. If you used a break tag <br> tag it would be written and not interpreted.
Everything that is put between the document.write parentheses is written to the window and will be written as one continuous line, in order to break up the lines you have to use the escaped n, \n, which is important if including scripts.

See Examples

Notice also the backslash \ before the forward slash / in the closing </script> tag. This may or may not be required for all scripts


Another example containing a closing script.

Open newWin

<script type="text/javascript">
<!--
function loadWin3() {
var newWin3=window.open('', 'win2','width=300,height=150,left=300,top=250') // See Attributes
newWin3.document.open
newWin3.document.write('<html>\n')
newWin3.document.write('<head>\n')
newWin3.document.write('<title>\n')
newWin3.document.write('newWin3\n')
newWin.document.write('</title>\n')
newWin3.document.write('<script>\n')
newWin3.document.write('<!--\n')
newWin3.document.write('setTimeout("self.close()",3000)\n')
newWin3.document.write('//-->\n')
newWin3.document.write('<\/script>\n')
newWin3.document.write('</head>\n')
newWin3.document.write('<body bgcolor="#00FF00">\n')
newWin3.document.write('<font color="#0000FF">\n')
newWin3.document.write('<b>This window will close in 3 seconds</b>\n')
newWin3.document.write('\n')
newWin3.document.write('</body>\n')
newWin3.document.write('</html>')
newWin3.document.close()
}
-->
</script>

<a href="#null" onclick="loadWin2()";return false">Open newWin</a>