Use a HTML to open a new window

using target=_blank will always open a new window

go to Yahoo

If you give your window a name, then the next link will show up there too! first click on the link to Yahoo, leave the window open, then click on the link to Webcrawler. You will see that the window will stay open and the page will change.

go to Yahoo
go to Webcrawler
Use JavaScript to open a new window. The open() method. 
window.open("URL","name","attributes");

Check out the valid attributes on page 299 of your book. Try different combinations, below are a few examples.

Use default attributes by not supplying the attributes: 
window.open('http://www.webcrawler.com', 'name')
go to webcrawler
Use height and width: 
window.open('http://www.yahoo.com', 'selectSize','height=350,width=320')
go to Yahoo
Use Location and resizable: 
window.open('http://www.yahoo.com', 'locationResizable','location=yes,resizable=yes')
go to Yahoo
Use toolbars and scrollbars: 
window.open('http://www.yahoo.com', 'toolbars','height=200,width=200,toolbar=yes,scrollbars=yes,menubar=yes,status=yes')
go to Yahoo

Before clicking on any one of the above links, scroll the page so you are no longer at the top. Then click on one of the links. Notice how the page jumps back up to the top. To keep the page from going back to the top, add return false;. Now scroll the page and click on the link below. 

<A HREF="#" onClick="window.open('http://www.yahoo.com', 'selectSize','height=350,width=320');return false;">go to Yahoo</a>
go to Yahoo

** Note To keep the page from repositioning back to the top, use return false; **
Create a generic function to open windows

The function below accepts 3 parameters, the URL of the web site you want to go to, the width of the new window, and the height of the new window. If we know the screen width and the screen height, we can place the new window in the middle of the document window. 

screen.width
screen.height
function OpenGenericWindow(url,WinWidth, WinHeight) 
{
	winleft = (screen.width / 2) - (WinWidth / 2);
	wintop = (screen.height / 2) - (WinHeight / 2);
	var popup = "height=" + WinHeight + ",width=" + WinWidth + ",left=" + winleft + ",top=" + wintop;

		popup += "status=no,location=no,menubar=no,toolbar=no,scrollbars=no,resizable=no";

	ChildWindow = window.open(url, 'GenPopup', popup);
}
OpenGenericWindow('http://www.techinmotion.com',660, 500)   www.TechinMotion.com
javascript to close a new window The close() method

Javascript can also be used to close a new window. Below is a link to a web page with a close button. 

window.close()
OpenGenericWindow('closeWindow.htm',250, 250)   Window with a close button



When one html page opens another html page using the window.open() method. The two windows can access objects and properties on each others document. For instance, if an html page (parent.htm) opened another html page (child.htm) with the following script: 

	ChildWindow = window.open('child.htm', 'GenPopup', 'height=200,width=200');
If both html pages have a form with an input text box. Each page could get the text field value from the other page! The page that opened the new window is the parent or opener of the new window being opened, and has access to the new window using the name ChildWindow from the code above. 
	document.forms[0].parentTextBox.value = ChildWindow.document.forms[0].childTextBox.value;
The new window, or child window has access to the input text field on the parent or opener using the following code. 
	document.forms[0].childTextBox.value = window.opener.document.forms[0].parentTextBox.value;


click here to see the demo.

Can you think of a time when you would want one page to get information from a pop up window?

Some web sites need you to pick a date. Like a web site that books flights or hotel reservations. Here is an example of a web page that opens up a drop down menu. When a value is selected, the field is populated with the value and the window closes.

click here to see the demo.