Working with Pop Ups and Browser Windows in JavaScript
(Page 1 of 5 )
This series of articles mainly concentrates on working with browser windows and sub-windows in JavaScript. You can reuse these scripts to inject into server side controls easily (especially in .NET and Java).
All of the examples in this series can be directly tested, by simply copying and pasting the entire code (of each section) in any text file with the extension .HTM and open it using a browser.
The first article in this series focused on resizing, moving, maximizing and creating pop up windows. This article is a continuation of the first. If you are new to working with pop up windows, I strongly suggest you go through my first article.
How to open a dynamic web page in a pop up window using JavaScript
Now, let us try to develop a simple script (JavaScript) to open a user specified web site dynamically in a pop up window. Have a look at the following code:
<html>
<head>
<meta name=vs_targetSchema
content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
<!--
function openWindowAtCenter(url) {
var myWindow;
var w = 400;
var h = 300;
var l = parseInt((screen.availWidth/2) - (w/2));
var t = parseInt((screen.availHeight/2) - (h/2));
var f = "width=" + w + ",height=" + h +
",status,resizable,left=" + l + ",top=" + t +
",screenX=" + l + ",screenY=" + t;
myWindow = window.open(url, "NewWindow", f);
}
function Button1_onclick() {
var v = document.all.txtWebSite.value;
openWindowAtCenter(v);
}
//-->
</script>
</head>
<body>
<form id="form1">
Enter a web site: <input type=text id="txtWebSite">
<input type="button" value="Show" id="Button1"
name="Button1" onclick="return Button1_onclick()">
</form>
</body>
</html>
Actually, within the above code, the "meta" tag is not necessary. Since I developed the above code using Visual Studio.NET 2003 Enterprise Architect, it was automatically added to provide its full-featured mechanisms. The explanation for the above code is given in the next section.
Within the above code, I managed to create a single text box named "txtWebSite" and a button named "Button1." When the button (button1) is clicked, the control goes to the function "Button1_onclick." This function mainly captures the URL (the website which is to be opened in the pop up window) given by the user and finally calls another function, "openWindowAtCenter" (along with passing the URL). The "openWindowAtCenter" function simply opens up a pop up window and gets redirected to the URL we specified within the text box.
Next: How to write to a pop up window dynamically using JavaScript >>
More JavaScript Articles
More By Jagadish Chaterjee
/ 8 
