Home arrow JavaScript arrow Working with Pop Ups and Browser Windows in JavaScript
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 16
April 25, 2006
TABLE OF CONTENTS:
  1. · Working with Pop Ups and Browser Windows in JavaScript
  2. · How to write to a pop up window dynamically using JavaScript
  3. · How to access the data available in a pop up window from within the main window using JavaScript
  4. · How to access the data available in the main window from within a pop up window and vice versa using JavaScript
  5. · 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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials