Jquery obtains the element parent window Child Window of the parent window

 

$ ("# Parent window element ID", specify parent parent.doc ument );

 

The corresponding criptlistener is paipaiparent.doc ument. getElementByIdx_x ("parent window element ID ");

 

 

 

Method for retrieving the element of the parent window: $ (selector, using multiple parent.doc ument );

Then, you can use $ (selector, role partition parent.parent.doc ument) to retrieve the elements of the parent window );

 

Similarly, the method for retrieving other windows is similar.

$ (Selector, Zookeeper top.doc ument );

$ (Selector, Zookeeper opener.doc ument );

$ (Selector, Zookeeper top.frames[02.16.doc ument );

 

 

 

Bytes --------------------------------------------------------------------------------------------------

 

Subwindow creation and communication between parent window and child window:

 

 

 

1. Javascript pop-up subwindow

 

You can implement it in multiple ways. The following describes several methods.

 

(1) through the open () method of the window object, the open () method will generate a new window object

 

Its usage is:

Window. open (URL, windowName, parameters );

 

URL: the URL of the window to be opened. If it is null, no webpage is opened;

 

WindowName: the nickname used to describe the opened window. You can use built-in names such as '_ top' and '_ blank'. The name here is the same as <a href = "... "target = "... "> the target attribute is the same.

 

Parameters: Describes the parameter value of the window to be opened, or the appearance. It includes the attribute values of the window and the parameter values to be passed in.

 

For example:

 

Open a clean window of 400x100:

Open ('', '_ blank', 'width = 400, height = 100, menubar = no, toolbar = no,

Location = no, directories = no, status = no, scrollbars = yes, resizable = yes ')

 

You can also write as follows: var newWindow = open ('', '_ blank ');

 

Parameters are described as follows:

 

Top = # number of records that exit from the top of the screen at the top of the window

Left = # number of records left when the left side of the window leaves the screen

Width = # window width

Height = # window height

Menubar =... Is there any menu in the window? The value is yes or no.

Toolbar =... does the window have a toolbar? The value is yes or no.

Location =... Is there an address bar in the window? The value is yes or no.

Directories =... whether there is a connection area in the window. The value is yes or no.

Scrollbars =... does the window have a scroll bar? The value is yes or no.

Status =... does the window have a status bar? values: yes or no

Resizable =... the window is not adjusted. The value is yes or no.

 

 

(2) In javascript, besides creating a window object through the open () method, you can also create a dialog box to bring up a window.

For example:

Alert (""); // The message prompt dialog box is displayed.

Confirm (""); // The message confirmation dialog box is displayed.

Prompt (""); // Interactive dialog box

 

However, the pop-up window implemented above has a single function and can only complete relatively simple functions. To display multiple data information in the dialog box,

 

Even HTML controls are powerless.

 

(3) Use modal dialogs to implement complex dialog box requirements

There is another method in the internal construction method of javascript that can display HTML content in a dialog box,

In other words, you can create a dialog box to complete the window object creation function.

The options include create modal dialog box and non-modal dialog box.

 

Implementation Method:

 

// Create a modal dialog box

Window. showModalDialog (sURL, vArguments, sFeatures)

 

 

// Create a non-Modal Dialog Box

Window. showModelessDialog (sURL, vArguments, sFeatures)

 

The difference is:

 

When you use showModelessDialog () to open a window, you do not need to use window. close () to close it. When it is opened in non-modal mode [IE5], open the dialog box.

 

The dialog box is not always the top focus. When the window URL is changed, it is automatically closed. The mode [IE4] Dialog Box always has focus (Focus cannot be removed until it is closed ). The modal dialog box is associated with the window that opens it. Therefore, when we open another window, their links are still saved and hidden under the activity window. ShowModeDialog () is not the case.

 

Parameter description:

 

SURL: A required parameter. Type: string.

 

Specifies the URL of the document to be displayed in the dialog box.

 

VArguments: optional parameter; Type: variant.

 

Used to pass parameters to the dialog box. The passed parameter types are not limited, including arrays. The dialog box uses window. dialogArguments to obtain the passed parameters.

 

SFeatures: select a parameter, type: string.

 

Used to describe the appearance and other information of the dialog box. You can use one or more of the following, separated by semicolons.

 

DialogHeight: dialog box height

 

The default unit of dialogHeight and dialogWidth in IE4 is em, while that in IE5 is px. For convenience, px is used as the unit when defining the modal mode dialog box.

 

DialogWidth: Dialog Box width.

 

DialogLeft: The left distance from the desktop.

 

DialogTop: the distance from the desktop.

 

Center: whether the window is centered

 

The default value is yes, but the height and width can still be specified. The value range is {yes | no | 1 | 0 }.

 

Help: whether to display the help button

 

The default value is yes. The value range is {yes | no | 1 | 0 }.

 

Resizable: whether the size can be changed.

 

The default value is no. The value range is {yes | no | 1 | 0} [IE5 +].

 

Status: whether to display the status bar.

 

The default value is yes [Modeless] or no [Modal].

 

Value Range: {yes | no | 1 | 0} [IE5 +].

 

Scroll: Specifies whether the scroll bar is displayed in the dialog box.

 

The default value is yes. The value range is {yes | no | 1 | 0 | on | off }.

 

There are also several attributes used in HTA, which are generally not used in general web pages.

 

DialogHide: whether the dialog box is hidden during print or preview.

 

The default value is no. The value range is {yes | no | 1 | 0 | on | off }.

 

Edge: Specify the border style of the dialog box.

 

The default value is raised. The value range is {sunken | raised }.

 

Unadorned: The default value is no. The value range is {yes | no | 1 | 0 | on | off }.

 

Input parameters:

 

VArguments is used to pass Parameters in the dialog box. The type is not limited. For string types, the maximum value is 4096 characters. You can also pass objects.

 

For example:

 

Var newWin = window. showModalDialog (url, window, 'dialogheight: 500px, dialogLeft: 100px, dialogTop: 100px,

 

DialogWidth: 300px, status: 0, edge: sunken ');

 

NewWin. open ();

 

Compared with the window. open () method to create a window, the difference between the mode method to create a window is that a window created by the mode method cannot operate the parent window.

 

 

2. Communication between child windows and parent windows

 

(1) Use window. open () to create a window and communicate with the parent window

You can obtain the parent window object through window. opener on the subwindow page. After obtaining the object, the subwindow can refresh the parent window and pass the value.

For example:

Window. opener. location. reload (); // refresh the parent window in the subwindow.

Window. opener. location. href // obtain the href of the parent window.

Window. opener. locaiton. pathname // obtain the parent window path

 

// Refresh the parent page

Window. location. href = window. location. href; // locate the parent page

Window. location. reload;

 

 

(2) Communication Between the modal window and the parent window

When you want to communicate with a parent window created using showModelDialog () and showModelessDialog (), you cannot use window. opener

 

To obtain the parent window object. To implement communication, you must input a parent window object to the Child Window when creating a modal subwindow.

 

Implementation Method:

 

In the parent window:

 

Var newWin = window. showModelDialog (url, window ,'');

NewWin. open ();

 

The window parameter is the parent window object.

 

In the subwindow:

 

You must first obtain the parent window object before using the parent window object. Because the parent window object is created in

The child window is passed in by passing in parameters. Therefore, in the Child window, you can only get the parent window object by getting window parameters. The method is as follows:

 

:

 

Var parent = widnow. dialogArguments;

The parent variable is the parent window object.

 

For example:

 

// Submit the form form1 in the parent window through the subwindow. After the subwindow is submitted, perform the query operation.

Var parent = window. dialogArguments;

Parent.doc ument. form1.action = "QueryInfor. jsp ";

Parent. submit ();

 

// Refresh the parent page

Var parent = window. dialogArguments;

Parent. location. reload ();

 

// Pass the value from the Child Window to the parent window

To realize the transfer of values in the modal subwindow to the parent window, use window. returnValue.

 

The implementation method is as follows:

 

In the subwindow:

 

// Obtain the value of a field in the parent window. If you add one to the value, return to the parent window.

Var parent = window. dialogArguments;

Var xforwardedparent.doc uement. getElementById ("age"). value;

X = x + 1;

 

// Returns the x value.

Window. returnValue = x;

 

In the parent window:

 

// Obtain the value from the subwindow

Var newWin = window. showModelDialog (url, window ,'');

If (newWin! = Null)

Document. getElementByIdx_x ("age"). value = newWin;

 

// Set the value of the parent window in the Child Window

The input value to the parent window in the Child Window does not seem to have been explicitly set in the parent window. Setting the element values in the parent window is more flexible, but the specific method used depends on the actual situation and the existing implementation method, if you use an unrealistic method, it not only reduces the development efficiency, but also reduces the execution efficiency. It will also lead to an inelegant implementation method and code style.

 

The sub-window uses the following methods to set the value of the parent window:

 

In the subwindow:

 

Var parent = window. dialogArguments;

Var xforwardedparent.doc ument. getElementByIdx_x ("age"). value;

X = x + 1;

// Set the age attribute value in the parent window

Parent.doc ument. getElementByIdx_x ("age"). value = x;

 

The above are some of the methods and materials I have collected and accumulated when using javascript in my project to solve subwindow problems. I implemented it by creating a modal window (this is mainly related to the project itself. open () or use window. although there is a big difference in implementation methods when showModelDialog () is used for parameter passing and other operations, the first contact may feel a bit messy, however, after clarifying the relationship between the child window and the parent window and the role, it is easy to understand.

From: Sun Fei's blog