Write content into a dynamic Javascript popup

I’ve posted a few articles about the Facebox lightbox dialog recently but sometimes a quick and dirty write of content into a regular window.open popup is all that is required. This post shows how to open a Javascript window and write content into it without having to load another page.

This is post one of two

This is the first of two posts which is in response to a question asked on my "Count the words in an FCKeditor instance with Javascript" post about how to get the content and load it into a window. The actual question was how to save the content into a cookie which would then be used to load the content into the popup, but as I will show this can be done without using cookies (and it should not be done with cookies).

The second post titled "Write content into a dynamic Javascript popup from FCKEditor" shows the same sort of information as in this post, but actually using an FCKEditor instance to load the content into the popup.

Working example

The example form below shows an example of what I mean. Change the text in the input field (or leave it as-is) and click the "Write to popup" button. A small popup window will appear with the content from the text box. This is entirely browser based and does not require a trip back to the server to load another page.

Note that if you are reading this in a feed reader or an email then it’s unlikely the form above will work, so click through to view this post in a web browser.

How it works

window.open returns a handle to the window that was opened, so the methods for that window can then be called including the write() method. So you can do this, for example:

var w = window.open('', '', 'width=400,height=400,resizeable,scrollbars');
w.document.write('Content goes here');
w.document.close(); // needed for chrome and safari

The third line which calls the close() method is required for Chrome and Safari and without it the content will not render in the popup.

The full code from the working example is as follows:

<script type="text/javascript">
function example_popup() {
    var w = window.open('', '', 'width=400,height=400,resizeable,scrollbars');
    w.document.write(document.getElementById('example_text').value);
    w.document.close(); // needed for chrome and safari
}
</script>

<form>
    <input type="text" id="example_text" size="50" value="This is some test content" /><br />
    <input type="button" value="Write to popup" onclick="example_popup()" />
</form>

Next post

As mentioned at the start of this post, the next post will shows how to write content into a dynamic Javascript popup from FCKEditor.