Welcome to another installment of the Lord of the ‘JavaScript,’ I promise there won’t be as much walking as in the original. Once we have created an application sometime we are faced with the issue of giving the user the ability to go to another page, but at the same time, we don’t want them to lose their place in our site, what do we do then? Well, we can allow the user to just open a new window to allow the user to view whatever they may need, yet still give them the ability to return and pick up where they left off.

We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!

 To begin, let’s go ahead and create a fresh HTML file to work in just to demonstrate the functionality that we are trying to create.

Now let’s go ahead and begin on opening a new window for the user. To do so we will be using the JavaScript property “window.open.” We will need to set the href to the site location and also use the target attribute to name the window itself, in case we need to refer back to that particular window.

Code Block
Ask a Question
Download Source
HTMLPage.htm
Open Window Event
var targetWin = window.open(pageURL, title)
We also have the ability on what the window will contain in terms of the toolbar, progress bar, directories, menu, and if it is resizable.
Code Block
Ask a Question
Download Source
HTMLPage.htm
Modifiying Our Window
var targetWin = window.open(pageURL, title, 'toolbar=yes, location=no, directories=no, status=no, menubar=yes, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
We will also be centering the window at the center of the screen, so to do so we will be taking the width of the screen itself and cutting it in half. Next we will be setting the width of half the window equal to half the screen minus half the window. This also applies to the height as well.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

Code Block
Ask a Question
Download Source
HTMLPage.htm
Setting Window to Center of Screen
function PopupCenter(pageURL, title, w, h) {
	var left = (screen.width / 2) - (w / 2);
	var top = (screen.height / 2) - (h / 2);
And in order to call this event I will be using an anchor element in our HTML body and set the OnClick event equal to our JavaScript event.
We have now created a new window using JavaScript, but can we close the same page in a similar fashion? The answer is yes!
Now you can see why we set the target element in case we would ever need to refer to the window just created, like now!
In order to close the newly created window, or any window, we will be using the “window.close” function. We will be targeting the window by URL and by target attribute. I will also be setting an alert to inform the user that the window is being closed. I will now be setting an input control’s, button’s, OnClick event equal to our close event.
Code Block
Ask a Question
Download Source
HTMLPage.htm
Close Window Event
function CloseWindow(pageURL, title) {
	alert("Window will be closed");
	window.close(pageURL, title);
}
There you have it, you have just learned how to Control Windows, one ‘Script to rule them all! Ok, so that’s enough bad movie quotes. If you have any other questions or concerns and have not yet downloaded the Source Code for this project, I strongly suggest doing so. Seeing it in its entirety can help clear up many of your questions. Thank you for your time and I hope this has been helpful, take care.

We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting! 

JavascriptWindowsTut.zip