Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 25, 2010

ASP.NET: Displaying a Second Window with JavaScript

Filed under: ASP.NET,C#,VB.NET @ 11:34 am

In your ASP.NET application, you may want to allow a user to view some additional information without leaving the page that they are on. For example, you may want to display the current window and show some help text in a new window. Or you may want to display the concert ticket order page and allow the user to view the seating chart for the arena in a new window.

Though you can display a new window with HTML, doing it with JavaScript gives you more control over the window. To create a window with JavaScript, use the following code:

In JavaScript :

<script type="text/javascript">
<!–
   var winNew
   function OpenWindow(sURL,sName)
   {
      winNew = window.open(sURL,sName);
   }
–>
</script>

With JavaScript, you have control over the location and size of the window and whether to include the toolbar, location, scrollbars, and so on. Add the desired attributes to the open command to achieve your desired look:

In JavaScript :

winNew = window.open(sURL, sName,
  "toolbar=no, location=no, scrollbars=yes, width=600, height=300,
   top=400, left=300");

Notice that all of window attributes are in one string parameter.

To link to a new window, call the OpenWindow function in the a (anchor) element of your HTML as follows:

In HTML:

<a href="javascript:OpenWindow(‘CourseList.htm’,’CourseList’);">
    View a list of our courses
</a>

To be a good citizen, close the new window when you no longer need it. Here is a function that closes the window:

In JavaScript :

function CloseWindow()
{
   if (winNew && !winNew.closed)
   {
      winNew.close();
   }
}

This code only closes the window if a new window exists and it is not already closed. This type of coding prevents errors in your JavaScript.

You may want to call this function from a button that the user can select, or from the unload event for the page so the new window is closed when the user leaves the page:

In HTML:

<body onunload="CloseWindow()">

Use this technique any time you want to open a second window from your HTML page.

(Based on an except from "Doing Web Development: Client-Side Techniques".)

Enjoy!

1 Comment

  1.   JavascriptBank.com — January 27, 2010 @ 8:14 pm    Reply

    very cool & good tip, thank you very much for sharing.

RSS feed for comments on this post. TrackBack URI

Leave a comment

*

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs