Popup Redirect or Refresh Parent Window - The Popup Window

Author: Kindler Chase
Author's Site: espCycling.com
Reference ID: 15629

Popup Window Primer

This popup window, also known as the child window, is where you provide your user with anything you like. The important aspect here is the ability direct the parent window to the proper page depending on the link your user selects. navigation.htm is what the user sees when the popup window opens.

Step Two: The Popup Window

Continuing our example, the popup window, navigation.htm provides access to two main sections of your site: One for Dreamweaver users, dreamweaver.htm and the other for UltraDev users, ultradev.htm.

1. Create two links on navigation.htm:
   
   Dreamweaver users click here* - this will eventually link the parent page to: dreamweaver.htm
   
   UltraDev users click here* - this will eventually link the parent page to: ultradev.htm
   
   *These are null links and do not do anything in this example; your page will have active links as described below.
   
   
   
2. For the Dreamweaver link:
1. Highlight the text "Dreamweaver users click here" and create a null link just like you did to open the pop up window. The code will now look like this:
   
   
   <a href="javascript:;">Dreamweaver users click here</a>
   
   
   
2. Now, to direct the parent window to the proper page, modify the above code as follows:
   
   
   <a href="javascript:;" onclick="opener.location='dreamweaver.htm'">Dreamweaver users click here</a>
   
   This bit of JavaScript tells the browser to open dreamweaver.htm in the parent window when the link is clicked.
   
   
   
3. To make the popup window close at the same time the parent window is being redirected to dreamweaver.htm, modify your existing code as follows:
   
   
   <a href="javascript:;" onclick="opener.location='dreamweaver.htm';self.close()">Dreamweaver users click here</a>
   
   This bit of JavaScript tells the popup window to close when the link is clicked.
   
   
3. For the UltraDev link, follow the steps in #2 above; remember to change the link to ultradev.htm instead of dreamweaver.htm.

Quick Recap

You created a page called navigation.htm that displays in the popup window. navigation.htm has 2 links that provide the user access to different parts of your web site. When the user clicks on either of the links, the parent window is redirected to the appropriate page and the popup window closes automatically.