JAVASCRIPT

Working with Pop Ups and Browser Windows in JavaScript

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).

Author Info:

By: Jagadish Chaterjee

Poor Best

Rating:

/ 16

April 25, 2006

TABLE OF CONTENTS:

· Working with Pop Ups and Browser Windows in JavaScript
· How to write to a pop up window dynamically using JavaScript
· How to access the data available in a pop up window from within the main window using JavaScript
· How to access the data available in the main window from within a pop up window and vice versa using JavaScript
· How to access the data available in main window from within a popup window and vice-versa using JavaScript: discussion

print this article

SEARCH DEVARTICLES

Working with Pop Ups and Browser Windows in JavaScript
(Page 1 of 5 )

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 >>