Parent Window refresh Child Window and Child Window refresh Js of parent window

Source: Internet
Author: User

One problem encountered today is that the main menu is placed in an IFRAME, And the link is controlled by JS, that is, the link corresponding to the current page is displayed in red. However, when you click the link in the parent window to replace the content in main, the link in IFRAME remains unchanged. At the beginning, I still wanted to judge through the content in the content display area, but I was not aware of it immediately. Later I wanted to associate it with the Child Window link through the parent window link, this is still very troublesome. Finally, when you click the link of the parent window, the content in the content display area changes. Then, the subwindow status should be the loading status. You just need to refresh it.

Search online immediately. The results are disappointing. All the searched results are the Js of the Child Window refreshing parent window, but no JS Code of the parent window refreshing Child Window. Later I thought about it. Isn't it okay to refresh the child window in the parent window and change the SRC link? Immediately, the results will come out immediately. There are just two lines of code, which are as simple as you can't believe!

/*
Zdz works
*/

Function reloadleft (){
VaR leftiframeid = Document. getelementbyid ('left'); // left indicates the ID of the IFRAME.
Leftiframeid. src = "left.html"; // the page where ileft.html is a frame
}

Add onclick = "reloadleft ()" to the link.

<A href = "contact.html" target = "Main" Title = "click to view" onclick = "reloadleft ()"> Contact Us </a>

JS to jump to the page: window. Location. href = "new.html"

------------------------

Below is the Js for refreshing the parent window in the Child Window collected

Self. opener. Location. Reload ();

Window. opener. Location. Reload (); // the key is to refresh the parent window.

------------------------

Using some pop-up subwindows properly in Web development has many advantages, which can save the page design cost and provide a good user experience. In recent project development, I encountered several Parent-Child Window problems, now I want to help you.

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>

2: Page B. The child window to be opened. When it is closed, window. opener. Location. Reload (); window. Close (); is triggered to refresh the parent window and close the Child Window.


Scenario 3: open a subwindow and let the user select the desired item. For example, select a photo to be added to the article and close the subwindow. Then, the selected item appears in the parent window.
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.

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.
At this time, you cannot use the window. showmodaldialog () event to open the mode dialog box. Because the ActiveX control reports an error, you must use window. open ()

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

 

<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>

 

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.