Use JavaScript implementation to always open the same child window and close the parent window and automatically close all child windows _javascript tips

Source: Internet
Author: User
Today on the Internet to see this article, it is rarely used, but after all, some people need such a function, otherwise there will be no this article, this article is mainly to solve the following problems:
Copy Code code as follows:

1. Click on a link to open a new form, how to implement if the form is open, turn focus to the open form, or open the new form. Difficulty: How can I tell if a form is open and that the form you are opening is active?
2. How do I close all other related forms that are open when a main form closes?
Implementation essentials:
1. window.open will return the window object for the newly opened windows.
2. Implements a simulated simple HashMap storage window object.
3. Every time you open, retrieve this HashMap to determine if the child window already exists.
4. If there is a direct switch focus (Window.focus).
5. If it does not exist, open one.
6. For 4, it is possible that the child window has been closed, so take a point of skill, first call its focus (in fact can any method), if the error, then open one.
7. When you close parent, traverse HashMap and try to close all child windows.
8. All operations are implemented in the parent window.
9. The whole implementation principle is very simple, as long as you need to familiarize yourself with JS and DHTML, and then pay attention to the details of processing.

At present, IE 6 SP1 test through, FF because it does not support Window.focus is not suitable for use.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>parent window</title> <script type= "Text/javascript" > Function Openwin () {//debugger; var sltwins = document.getElementById ("Sltwins"); var url = sltwins.value; var winname = Url.replace ('. ', ' _ '); VAR win; Win = Winmap[winname]; try {win.focus (); }catch (e) {//alert (e.message); We need to open a new window when the child window has does//been opened or the child window has been CL Ose. As to the later, your also can implements some method so notices the parent window//To remove the child Window from We winmap object when it is closing. But it ' s a piece of hard wOrk, I because you must//add the notice codes to all of the child windows// win = window.open (URL, winname, "top=100,left=100,width=400,height=300"); Winmap[winname] = win; if (!win) {alert ("Sorry, fail to open" window.) Some unexpected error occurs. ");} else {//I try to bind a callback function to the child window ' s Unload Event/ /Unfortunately, it seems not to work. Win.onunload = function () {//try {//alert (Opener.winmap [Winname]); Opener.winmap[winname] = null; Alert (Opener.winmap[winname]); catch (E) {///alert (e.message); // } // }; Win.focus (); } } </script> <script type= "Text/javascript" >//Stores the opened window OB ject var winmap = new Object (); winmap["Testedkey"] = "testedvalue"; Window.onunload = function () {//try to close all child windows. for (Var propname in Winmap) {try {winmap[propname].close (); }catch (e) {//alert (e.message); }} </script> </pead> <body> <p>maintaining the Parent win Dow and Multi child windows as in winform</p> <p>funcions:</p> <ol> < Li>open the same child window once.</li> <li>close the "child windows" when "the parent window is closing.</li> </ol> child window: <select id= "Sltwins" > <option selected = "Selected" value= "c1.htm" > #1 </option> <option value= "c2.htm" > #2 </option> </select> <input id= "Btnopen "Type=" button "Value=" Open the selected Window "onclick=" Openwin () "/> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Package file Download
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.