JavaScript code samples 26 - opening a new browser window

©ilj@flowsim.se
JavaScript code samples 26
JavaScript window.open(), document.write(), self.close()
>>> this example in Swedish

click here
to open
a
new
window
!

code & explanations further down

(The picture is a sketch after (a detail from) a painting by an Italian renaissance artist named Filippo Lippi (c 1406-1469). He is also known as the monk who ran away with his model, the nun Lucretia Buti. They had a son, Filippino Lippi, who also became a painter. The painting is a tondo (circular), was painted in 1452, depicts the Madonna and the child and scenes from the life of Saint Anne and hangs in the Palazzo Pitti in Florence.)

And here´s the code:

A click on the link

<A HREF = "javascript:iljbildwin()">
CLICK HERE TO OPEN A NEW WINDOW</A>

calls the function

function iljbildwin()
{
iljbildfonst= window.open('¹','windowname²','width=210,height=510'³)
iljbildfonst.document.open()
iljbildfonst.document.writeln("<IMG SRC = 'pict.jpg'>")⁴
iljbildfonst.document.close()
}

There should be just four lines between the curly braces each one of them starting by iljbildfonst.⁵

Put the function within SCRIPT tags in the HEAD part of the document (see MINIMANUAL 1 basics).

1 you could put a URL here - if you want to open an existing page in the new window - and skip the following lines which are used only if you want to create a new page in the new window

2 you could give the window a name here - necessary if you are going to refer to it using the TARGET tag

3 this is where you write code to make the window look the way you want it to look -
the whole thing between brackets could look like this:

('example.html','windowname',
'toolbar=yes,location=yes,directories=yes,
status=yes,menubar=yes,scrollbars=yes,
resizable=no,width=600,height=480')

setting only e g menubar=yes means that toolbar, location etc will automatically be set to "=no".
No spaces between options!

4 writes the HTML code (placed within parentheses and quotation marks) to the document, ie, in this case, puts a picture on the page

5 if you have got a lot of text or code to write to the document the code will probably be easier to read if you, instead of writing everything on one line, divide the string into shorter sections, put these sections within double quotation marks and connect them using a plus sign, like this

"<IMG SRC = 'pict.jpg'"
+"HEIGHT = '200'"
+"WIDTH = '200'>"

OTHER JAVASCRiPT EXAMPLES