jquery Gets the parent window's Element parent window child window

Source: Internet
Author: User
Tag: java use os io strong data for ar

$ ("# Parent window element ID", window.parent.document);

The corresponding javascript version is window.parent.document.getElementByIdx_x ("parent window element ID");

 

Take the element method of the parent window: $ (selector, window.parent.document);
Then you can take the elements of the parent window of the parent window: $ (selector, window.parent.parent.document);

Similarly, the method of taking other windows is similar
$ (selector, window.top.document);
$ (selector, window.opener.document);
$ (selector, window.top.frames [0] .document);

 

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

Child window creation and communication between parent window and child window:

 

1. Javascript pops up a child window

Can be achieved in many ways, here are 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: Describe the URL address of the window to be opened. How to leave it blank without opening any web page;

windowName: the public name describing the opened window, you can use the built-in names such as '_top', '_blank', etc. The name here follows the target attribute in <a href="..." target="..."> it's the same.

parameters: describes the parameter values, or appearances, of the opened window, which includes the property values of the window and the parameter values to be passed in.

E.g:

Open a 400 x 100 clean window:
open (‘‘, ‘_ blank’, ‘width = 400, height = 100, menubar = no, toolbar = no,
location = no, directories = no, status = no, scrollbars = yes, resizable = yes ‘)

It can also be written like this: var newWindow = open (‘‘, ‘_ blank’);

The parameter description is as follows:

top = # The number of pixels that the top of the window leaves the top of the screen
left = # The number of pixels from the left end of the window to the left end of the screen
width = # The width of the window
height = # The height of the window
menubar = ... Whether the window has a menu, the value is yes or no
toolbar = ... Does the window have a toolbar, the value is yes or no
location = ... Does the window have an address bar, the value is yes or no
directories = ... Does the window have a connection area, value yes or no
scrollbars = ... Whether the window has scroll bars, the value is yes or no
status = ... Does the window have a status bar, value yes or no
resizable = ... The window is not resized, the value is yes or no


(2) In addition to creating a window object in javascript to achieve a pop-up window, you can also pop-up a window by creating a dialog box.
Such as:
alert (""); // A message prompt dialog pops up
confirm (""); // A message confirmation dialog pops up
prompt (""); // Interactive dialog box

However, the above-mentioned realized pop-up window has a single function and can only complete a relatively simple function. For the need to display multiple data information in the dialog box,

Even HTML controls are powerless.

(3) Use modal dialogs to achieve complex dialog requirements
In the built-in method of javascript, there is a method to display HTML content through the dialog box,
In other words, you can complete the functions that can be done by creating a window object by creating a dialog box.
Including the creation of modal dialog boxes and non-modal dialog boxes.

The implementation method is:

// Create your modal dialog
window.showModalDialog (sURL, vArguments, sFeatures)


// Create non-modal dialog
window.showModelessDialog (sURL, vArguments, sFeatures)

The difference is:

When using showModelessDialog () to open a window, you do n’t have to use window.close () to close it. When you open it in a non-modal manner [IE5], a dialog box

The window of can still perform other operations, that is, the dialog box is not always the top focus, and when the URL of the window that opens it changes, it automatically closes. The dialog box in modal [IE4] mode always has the focus (the focus cannot be removed until it is closed). The modal dialog is connected to the window that opened it, so when we open another window, their link relationship is still saved and hidden under the active window. showModeDialog () is not.

Parameter Description:

sURL: required parameter, type: string.

Used to specify the URL of the document to be displayed in the dialog box.

vArguments: optional parameters, type: variant.

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

sFeatures: select parameters, type: string.

Used to describe the appearance of the dialog box and other information, you can use one or more of the following, separated by a semicolon ";".

dialogHeight: dialog height

No less than 100px, the default unit of dialogHeight and dialogWidth in IE4 is em, and px in IE5.

dialogWidth: the width of the dialog.

dialogLeft: the distance from the left of the desktop.

dialogTop: the distance from the desktop.

center: whether the window is centered

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

help: whether to show the help button

The default is yes, and the range is {yes | no | 1 | 0}.

resizable: Whether it can be resized.

Default no, value range {yes | no | 1 | 0} [IE5 +].

status: Whether to display the status bar.

The default is yes [Modeless] or no [Modal],

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

scroll: Specifies whether the dialog box displays scroll bars.

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

There are also several attributes that are used in HTA and are generally not used in general web pages.

dialogHide: Whether the dialog box is hidden during printing or print preview.

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

edge: Specifies the border style of the dialog box.

The default is raised, and the value range is {sunken | raised}.

unadorned: The default is no, and the value range is {yes | no | 1 | 0 | on | off}.

Incoming parameters:

To pass parameters to the dialog box, it is passed through vArguments. The type is not limited. For the string type, the maximum is 4096 characters. Can also pass objects

E.g:

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 a modal method to create a window is that a window created with a modal method will not be able to operate the parent window.


2. Communication between child window and parent window

(1) The window created by window.open () communicates with the parent window
The parent window object can be obtained through window.opener in the child window page. After the acquisition, the child window can perform operations such as refreshing and passing values to the parent window.
Such as:
window.opener.location.reload (); // Child window refreshes the parent window
window.opener.location.href // Get the parent window href
window.opener.locaiton.pathname // Get the path name of the parent window

// Refresh the parent page
window.location.href = window.location.href; // Reposition the parent page
window.location.reload;


(2) The modal window communicates with the parent window
When a child window created by using showModelDialog () and showModelessDialog () methods wants to communicate with the parent window, it cannot pass window.opener

To get the parent window object. To achieve communication, the parent window object must be passed to the child window when the modal child window is created.

The implementation method is:

In the parent window:

var newWin = window.showModelDialog (url, window, ‘‘);
newWin.open ();

At this time, the parameter window is the parent window object

In the child window:

You need to get the parent window object before you can use the parent window object. Because the parent window object is being created
The child window is passed in by passing parameters, so the child window object can only be obtained by obtaining window parameters in the child window. The way to get it is as follows

:

var parent = widnow.dialogArguments;
The variable parent is the parent window object.

E.g:

// Submit the form in the parent window through the child window: form1, execute the query operation after submission
var parent = window.dialogArguments;
parent.document.form1.action = "QueryInfor.jsp";
parent.submit ();

// Refresh the parent page
var parent = window.dialogArguments;
parent.location.reload ();

// pass value from child window to parent window
To achieve the transfer of values in the modal child window to the parent window, you need to use window.returnValue to complete

The implementation method is as follows:

In the child window:

// Get the value of a field in the parent window, add one to the value and return to the parent window
var parent = window.dialogArguments;
var x = parent.docuement.getElementById ("age"). value;
x = x + 1;

// Return the x value
window.returnValue = x;

In the parent window:

// Get the value from the child window
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
It seems that the value passed into the parent window in the child window does not directly set the value in the parent window. It is more flexible to directly set the value of the element in the parent window, but the specific method to be used depends on the actual situation and the existing implementation, because if the unrealistic method is used, it not only reduces development efficiency, but also reduces Execution efficiency often leads to inelegant implementation and code style.

The method of setting the value of the parent window in the child window is as follows:

In the child window:

var parent = window.dialogArguments;
var x = parent.document.getElementByIdx_x ("age"). value;
x = x + 1;
// Set the age attribute value in the parent window
parent.document.getElementByIdx_x ("age"). value = x;

The above are some methods and materials that I collected and accumulated when I used javascript to solve the problem of child windows in the project. I implemented it by creating a modal window (this is mainly related to the project itself), but whether it is window.open () or window.show Although the implementation method of ModelDialog () passing parameters and other operations is very different, the first contact will feel a little messy, but as long as the relationship and role between the child window and the parent window are clarified, it is well understood.

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.