Opening New Windows

Referencing a new window
Referencing elements in a new window

Attributes

Is a "new window" any different to a "popup window", basically the answer is no.
The method used to do either is relatively the same, I suppose the real difference would be in the size of the new window. Small windows tend to be classed as popups.

The information on this page will show you how you can open your new window using both the inline and script methods, and how to size and place a window.

The basic code for opening a new window is

<a href="yourpage.htm" target="_blank">Example 1</a>

Example 1

Scriptwise: inline statements

<a href="yourpage.htm" target="_blank" onclick="window.open(this.href, this.target); return false">Example 2</a>

Example 2

The above links opened a new full sized window, to have the window open in a size and position of your choosing attributes can be added.

<a href="your_page.htm" target="_blank" onclick="window.open(this.href, this.target,'width=300,height=100,left=450,top=250,toolbar=yes');return false">Example 3</a>

Example 3

If you want to ensure a new window is still opened in the remote chance that Javascript is turned off you should include target="_blank"
You should always including return false to prevent the default action of the link from loading the page into the current window when the onclick event is fired, the only time you would not include target="_blank" and/or return false is if you were wanting to load another page into the current window as well.

In the event that you do want to load a page into the current window and another page into a new window you would use something like this.

<a href="page1.htm" onclick="window.open('page2.htm','win1','left=100,top=300,width=300,height=300')">Load 2 Pages</a>

Notice there is no target="_blank" or return false

Load 2 Pages

Scriptwise: functions

Using a function gives you the flexibility to open many new windows using less coding.

When creating new windows using a function you assign the window object (your new window) to a variable (windowHandle), you may also include a window name. Although the window name is optional you must still include the single quotes if not used.

windowHandle=open('url','window name','attributes')

The following script will open new windows of the stated size and in the stated position, the page to be loaded into the new window is passed to the function when a link is clicked. 

<script type="text/javascript">
<!--
function openWindow(url){
newWin = open(url,'','width=200,height=100,top=300,left=250' )
}
//-->
</script>

<a href="your_page1.htm" onclick="openWindow(this.href) ; return false">Example 4a</a>

<a href="your_page2.htm" onclick="openWindow(this.href) ; return false">Example 4b</a>

Example 4a Example 4b

If you do not include a name a new window is opened with every click of every link, click the above links a few times and see how many windows open even from the same link, you may have to look at your taskbar

If you give the window a name your page is loaded into the same new window. 

<script type="text/javascript">
<!--
function openWindow(url){
newWin = open(url,'winName','width=200,height=100,top=300,left=250' )
}
//-->
</script>

<a href="your_page1.htm" onclick="openWindow(this.href) ; return false">Example 5a</a>

<a href="your_page2.htm" onclick="openWindow(this.href) ; return false">Example 5b</a>

Example 5a Example 5b

You can make the script even more flexible by passing additional arguments to the function for example the width, height, left and top position.
This will allow you to have different sized windows in different positions. 

<script type="text/javascript">
<!--
function openWindow(url,Left,Top,Width,Height,atts){
var newWin=open(url,'','left='+Left+',top='+Top+',width='+Width+',height='+Height+',attributes='+atts+'' )
}
// -->
</script>
<a href="page1.htm" onclick="openWindow(this.href,100,100,400,200,'toolbar=yes,location=yes');return false">Example 6</a>

<a href="page2.htm" onclick="openWindow(this.href,400,100,200,400,'toolbar=no,location=no');return false">Example 7</a>

Example Link 6 Example Link 7

The above script does not use a window name so that a seperate window is opened for each link.
Although it is possible to use the same window in this way it does require some extra coding other than just including the name, you can see how it is done in Image Gallery 7

If a script is going to be used to open the new windows then instead of adding return false to all the links you can add return false to the end of the function.

function openWindow(){
var newWin=open()
return false
}

For this method you would have to add the word return immediately before the function call within the onclick event.

onclick="return openWindow()

Now that we have enough information to open single or multiple windows any size and in any position the next step is to learn how to reference a new window.

window.open('page.htm','windowName')

Referencing a new window
Referencing elements in a new window

Window Attributes

New windows can be opened with specific sizes and in a specific place on your screen.
You can also decide how the window looks with regards to toolbars and status bar.

window_handle=open('url','window_name','attributes')

Each attribute must be separated by a comma.

Open in a set size onload

To have a window open to a set size when the document is loaded add onload=self.resizeTo(600,480)> to the opening <BODY> tag

Resize onclick

To have a window re-size itself when the document is loaded add onclick="self.resizeTo(600,480)" to the link

<a href="yourpage.htm" onclick="self.resizeTo(600,480)"> Your Link</a>