Practical application of javascript: parent-child page Interaction

The interaction between a child window and a parent window is basically nothing more than passing the information of the Child Window to the parent window, closing yourself, or passing the information of the parent window to the Child Window.

1. The parent window transmits information to the Child Window

ViewCodeInstance:
<Script language = JavaScript>

Function output ()
{
// Obtain the text information of the parent window and assign it to text
VaR text = Document. ABC. Text. value;
// Open the subwindow and assign the operation handle to the win variable. All of the following operations are for the win object.
VaR win = Window. Open ("", "mywin", "menubar = No, width = 400, Height = 100, resizeable = yes ");
// Output Basic Information
Win.doc ument. writeln ("<title> output result </title> ");
Win.doc ument. writeln ("your information is: <p> ");
// Output the information obtained from the parent window
Win.doc ument. writeln (text );
Win.doc ument. Close ();
Win. Focus ();
}
</SCRIPT>

<Form name = ABC method = post>
<Input type = text name = text size = 50>
// Call the above function
<Input type = button value = submit onclick = "output ()">

</Form>

2. The Child Window Passes parameters to the parent window.

Let's transform the above Code:

<Script language = JavaScript>

Function output ()
{
VaR text = Document. ABC. Text. value;
VaR win = Window. Open ("", "mywin", "menubar = No, width = 400, Height = 100, resizeable = yes ");
Win.doc ument. writeln ("<title> output result </title> ");
Win.doc ument. writeln ("your information is: <p> ");
Win.doc ument. writeln (text );
Win.doc ument. writeln ("<input type = text name = Child value = subwindow information> ");

// The key is to operate on the Child Window, use the self object, and use the opener object for the parent window operation.
// Return the form value in the Child Window to the parent window, replace the previous value of the parent window form, and close the Child Window
Win.doc ument. writeln ("<input type = button value = close your onclick = 'window. opener. ABC. text. value = self. child. value; self. close () '> ");
// You can disable the parent window.
Win.doc ument. writeln ("<input type = button value = close parent window onclick = 'window. opener. Opener = NULL; window. opener. Close () '> ");
// Refresh the parent window
Win.doc ument. writeln ("<input type = button value = Refresh parent window onclick = 'window. opener. Location. Reload () '> ");

Win.doc ument. Close ();
Win. Focus ();
}
</SCRIPT>

<Form name = ABC method = post>
<Input type = text name = text size = 50>
<Input type = button value = submit onclick = "output ()">

</Form>

3. Does not interact with the Child Window and parent window of the same page

Suppose we are dealing with externalProgramFor example, PHP, ASP, and so on, we may be processing two pages. For example, for the upload function, we just need to open a new page and then pass the value in the new page to the parent page.

Partial code example:

<Input type = "input" value = "" name = "input_tag" id = "input_tag" onkeyup = "clearpretagstyle ()" size = "40">
<Input type = "hidden" value = "0" name = "tagid" id = "tagid">
<Input type = "button" value = "tag" onclick = "popupwindow ('tag. php? Tag = '+ escape (document. tryst_form.input_tag.value) ">

The above is part of the code of the parent window. The popupwindow in it is a encapsulated window. OPEN function. PHP is another page. We need to submit the values in the current form to the tag. PHP page.

Some code of tag. php:

Query tag results:
<A href = "#" name = "tag_1"> life </a> <a href = "#" onclick = "opener.doc ument. tryst_form.input_tag.value = document. tag_1.innerhtml "> Add this tag </a>

<A href = "#" name = "tag_2"> life show </a> <a href = "#" onclick = "opener.doc ument. tryst_form.input_tag.value = document. tag_2.innerhtml "> Add this tag </a>

This is our subwindow. We need to return tag_1 and tag_2 to the subwindow, although they are not the same page. Here is a knowledge point, that is, how to obtain the value in the connection. We use the innerhtml attribute: document. tag_2.innerhtml: We get the value of tag_2 "Life Show". We can also use other methods to obtain it, such as: document. all. tag_2.innerhtml, or this. innerhtml refers to the link value.

Access to the parent window is also handled using the opener object: opener.doc ument. tryst_form.input_tag.value, you can change the value of the parent window.

This is basically what I know now. I will add more things later.
Bytes --------------------------------------------------------------------------------------------------------------------------
W EB developing Use appropriate bombs There are many advantages for the out-of-sub window, Yes Save the page design cost and get a good user experience. Project I encountered several Parent-Child Window problems during development. Now I want to help you sort them out.

Scenario 1: open a subwindow. When any button in the subwindow is clicked, a new page cannot be displayed. After completing the operation, close the subwindow and refresh the parent window.

1: page A: parent window, with a link to open the Child Window, <a href = "#" onclick = "open () "> Page C </a>
A has the following JS Code:

< Script Language = " Javascript " >
Function Open ()
{
Window . Showmodaldialog ( " Page B " );
}
</ Script >

2: Page B, which is an intermediate page and plays a transitional role
The B HTML code is as follows:

<! Doctype html Public   " -// W3C // dtd xhtml 1.0 transitional // en "   " Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< HTML xmlns = " Http://www.w3.org/1999/xhtml " >
< Head >
< Meta HTTP - Equiv = " Content-Type " Content = " Text/html; charset = gb2312 "   />
< Title > ** </ Title >
</ Head >

< Frameset rows = " 0 ,* " >
< Frame SRC = " About: blank " >
< Frame SRC = " Page C " >
</ Frameset > < Noframes > </ Noframes >
</ Html >

3: Page C, the subwindow to be opened.
It is very easy to refresh the parent window when closing.
<A href = "#" onclick = "open ()"> Change Page C </a>
<A href = "page a" onclick = "open ()"> Page C </a>

Scenario 2: open a subwindow that requires ActiveX Control. When a button is clicked in the subwindow, a new page cannot be displayed. After the operation, close the subwindow and refresh the parent window.
This time cannot be used Window. showmodaldialog () Event open mode dialog box ,BecauseActiveXControl will report an error, Must be used window. open ()
1: page A: parent window, with a link to open a subwindow. "> page B
A contains the following JS Code.
2: page B, the sub-window to be opened . The window is triggered when it is closed. opener. location. reload (); window. close (); to refresh the parent window and close the sub- window .
Scenario 3: open a subwindow and let the user select the stuff to add, such Article In the left-side navigation pane.
In the left-side Navigation Pane, click "add photo". Then, a subwindow is displayed. In the subwindow, select and click "add photo". The subwindow is closed automatically. In the parent window, "added photos" are displayed: "The selected photos are listed below.

Implementation Method: similar to scenario 1, the intermediate page B is required, except for obtaining the value of the selected checkbox in the JS event triggered when the "add" button is clicked in subwindow C, return the obtained value to the parent window. The code for transferring the value back is as follows.

< Script Language = " Javascript " >
Function Open ()
{
Window . Open ( " Page B " , ' Upload ' ,   ' Height = 400, width = 420, Top = 0, Left = 0, toolbar = No, menubar = No, scrollbars = No, resizable = No, location = No, status = No ' );
}
</ Script >

 

Window . Parent . Returnvalue = " Selected checkbox " ;
Window . Parent . Close ();

To capture this value in the parent window, you must add it to the open () event in scenario 1 to obtain the returned value.

< Script Language = " Javascript " >
Function Open ()
{
VaR Str = Window . Showmodaldialog ( " Page C " );
If (Str ! = Null )
{
Picobj . Innerhtml + = STR;

}
}
</ Script >

Note that STR is the returned value, while picobj is the ID of the DIV where you want to display the position of the selected Dongdong. Here is <Div id = picobj> </div>