Writing Dynamic Content to a New Window

This script not only opens a new window, it dynamically writes the HTML to the document contained in the window. Notice the first parameter of the open method in the example below. We are not specifying a file name.

function popUp(){

var frog = window.open("","wildebeast","width=300,height=300,scrollbars=1,resizable=1")

var text = document.form.input.value

var html = "<html><head></head><body>Hello, <b>"+ text +"</b>."
html += "How are you today?</body></html>"

//variable name of window must be included for all three of the following methods so that
//javascript knows not to write the string to this window, but instead to the new window

frog.document.open()
frog.document.write(html)
frog.document.close()

}

Although we cannot create a new HTML document with JavaScript, we can overwrite the contents of an existing document. The existing "blank" document will vary from browser to browser, but does exist, and therefore can be overwritten.

The last three lines of the script should look familiar to you: remember - when using a document.write() statement after a page has finished loading, we must close the stream for NN4. The part of the following lines that is different from how the write mehtod has been used previous is the reference to the new window. We want to write html to the document in our new window, not to the document containing the statement, so we have to include the window's name.

frog.document.write(html)
frog.document.close()

Writing From a Sub Window to Its Opener Window
If this script was contained in the pop up window, and we wanted to write to the opener window, we'd simply replace "frog" in each of the above statements with "opener". Remember - opener is how JavaScript refers to the window that launched a new window.

View the Source