Parsing jquery Gets the element of the parent window _jquery

Source: Internet
Author: User

("#父窗口元素ID", window.parent.document); Corresponding JavaScript version is window.parent.document.getElementByIdx_x ("Parent window Element ID");

Takes the element method of the parent window: $ (selector, window.parent.document);
Then you can take the element of the parent window of the parent window to use: $ (selector, window.parent.parent.document);
Similarly, there are similar methods for taking other windows.
$ (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 pop-up child window
Can be implemented in a variety of ways, here are a few ways
(1) by using the open () method of the Window object, the open () method will produce a new Window object
Its usage is:
window.open (url,windowname,parameters);
URL: Describes the URL of the window to open, and how to empty it without opening any web page;
Windowname: Description of the opened window of the people said, you can use ' _top ', ' _blank ' and other built-in names, where the name and <a href= "..." target= "..." the target attribute in > is the same.
Parameters: Describes the parameter values of the window being opened, or the appearance, which includes the values of each property of the window, and the parameter values to pass in.
For example:
Open a clean window of x 100:
Open (', ' _blank ', ' width=400,height=100,menubar=no,toolbar=no,
Location=no,directories=no,status=no,scrollbars=yes,resizable=yes ')
You can also write this: var newwindow = open (', ' _blank ');

The parameter description is as follows:
The number of pixels off the top of the screen at the top of the top=# window
left=# window left the number of pixels leaving the left side of the screen
Width of the width=# window
Height of the height=# window
Menubar= ... Window has no menu, value Yes or no
Toolbar= ... Window has toolbar, value Yes or no
Location= ... window has no address bar, value yes or no
Directories= ... window has no connection area, value Yes or no
Scrollbars= ... Window has scroll bar, value Yes or no
Status= ... Window has status bar, value Yes or no
Resizable= ... window is not resized, value yes or no

(2) in JavaScript, in addition to the open () method to create a Window object implementation pop-up, you can create a dialog box pop-up window.
Such as:
Alert (""); Pop-up Message prompt dialog box
Confirm (""); Pop-up Message Confirmation dialog box
Prompt (""); dialog box with an interactive nature
However, the above implementation of the pop-up window has a single function, can only complete a relatively simple function. For the need to display multiple data information in a dialog box,
Even HTML controls are powerless.

(3) using modal dialogs to implement complex dialog box requirements
There is also a way in which JavaScript's built-in methods can be used to display HTML content through a dialog box,
That is, you can do what you can to create a window object by creating a dialog box.
This includes creating modal dialog boxes and modeless dialog boxes.

The implementation method is:
Create modal you dialog box
window.showModalDialog (Surl,varguments,sfeatures)
To create a modeless dialog box
Window.showmodelessdialog (Surl,varguments,sfeatures)

The difference between

is that
does not have to use Window.close () to turn it off when the window is opened with showModelessDialog (), opening the dialog box when the modeless [IE5] opens
Window can still do other things, that is, the dialog box is not always the top focus, and when the URL of the window to open it changes, it automatically closes. The modal [IE4] mode dialog box always has the focus (the focus cannot be moved until it closes). The modal dialog box is associated with the window that opens it, so when we open another window, their link relationship is still saved and hidden underneath the active window. Showmodedialog () is not.

parameter Description:
surl: Required parameter, type: String. The
is used to specify the URL of the document to display in the dialog box.
varguments: Optional parameter, type: Variant. The
is used to pass parameters to the dialog box. The parameter types passed are not limited, including arrays, and so on. The dialog box is window.dialogarguments to get the parameters passed in.
Sfeatures: Select parameter, type: String.
to describe information such as the appearance of a dialog box, you can use one or more of the following, with a semicolon ";" Separated.
dialogheight: Dialog height
is not less than 100px,ie4 in dialogheight and dialogwidth the default unit is EM, and in IE5 is PX, in order to facilitate its see, in the Definition of modal dialog box, with PX units.
Dialogwidth: Dialog box width.
Dialogleft: The distance from the left side of the desktop.
Dialogtop: The distance from the desktop.
Center: Window is centered
default Yes, but you can still specify height and width, value range {yes | no | 1 | 0}.
Help: Whether or not to display the assistance button
Default Yes, value range {yes | no | 1 | 0}.
Resizable: Whether the size can be changed.
Default No, value range {yes | no | 1 | 0} [ie5+].
Status: Whether the status bar is displayed.
default to yes[Modeless] or no[modal],
Value range {Yes | no | 1 | 0} [ie5+].
Scroll: Indicates whether the dialog box displays scroll bars. The
default is yes, the value range {yes | no | 1 | 0 | on/off}. The
also has several properties that are used in an HTA and are generally not used in general Web pages.
Dialoghide: Dialog box is hidden when printing or printing preview. The
default is no, the value range {yes | no | 1 | 0 | on | off}.
Edge: Indicates the border style of the dialog box.
Default is raised, value range {Sunken | raised}.
Unadorned: Default is no, value range {yes | no | 1 | 0 | on | off}.

Incoming parameters:
To pass arguments to the dialog box, it is passed through the varguments. Type is not restricted, for a string type, the maximum is 4,096 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 ();
Instead of creating a window using the window.open () method, the modal method creates a window that is not able to manipulate the parent window after a window created by the modal method.
2. Communication between child window and parent window
(1) using window.open () to create a window to communicate with the parent window
You can get the parent window object by Window.opener in the child window page, and then the child window can perform the refresh, value, and so on for the parent window.
such as:
Window.opener.location.reload (); child window refreshes parent window
Window.opener.location.href//Get parent window href
Window.opener.locaiton.pathname//Get the parent window path name
Refreshing the parent page
Window.location.href=window.location.href; Relocate parent page
Window.location.reload;
(2) modal window communicates with parent window
A child window created by using Showmodeldialog () and the showModelessDialog () method cannot be passed through Window.opener when it wants to communicate with the parent window
To get the parent window object. To implement communication, you must pass in the parent window object to a child window when you create a modal child window.
Implemented in the following ways:
in the parent window:
var newwin=window.showmodeldialog (Url,window, "");
Newwin.open ();
The parameter window is the parent window object at this time
in the child window:
You need to get the parent window object first before you can use the parent window object. Because the parent window object is creating a
Child window is passed in as a parameter, so the parent window object can only be obtained in a child window by getting the window parameter.get the following way:
var parent=widnow.dialogarguments;
Variable parent is the parent window object.
For example:
To submit a form in the parent window through a child window: Form1, perform a query operation after committing
var parent=window.dialogarguments;
Parent.document.form1.action= "queryinfor.jsp";
Parent.submit ();
Refreshing the parent page
var parent=window.dialogarguments;
Parent.location.reload ();
To pass a value from a child window to a parent window
To implement a pass value to the parent window in a modal child window, you need to use Window.returnvalue to complete
The implementation method is as follows:
In the child window:
Gets the value of a field in the parent window, adds one to the value, and returns the parent window
var parent=window.dialogarguments;
var X=parent.docuement.getelementbyid ("Age"). Value;
x=x+1;
return x Value
Window.returnvalue=x;
in the parent window:
To get values from child windows
var newwin=window.showmodeldialog (Url,window, "");
if (newwin!=null)
Document.getelementbyidx_x ("Age"). Value=newwin;
To set the value of a parent window in a child window
Passing values to the parent window in a child window does not seem to be straightforward to set the value in the parent window. It is more flexible to set the value of the element directly in the parent window. However, the specific approach to use depends on the actual situation and the existing implementation, because if the use of unrealistic methods not only reduce development efficiency, but also reduce the efficiency of execution, often resulting in an elegant way of implementation and code style.
The child window sets the value of the parent window using the following method:
child window:
var parent=window.dialogarguments;
var x=parent.document.getelementbyidx_x ("Age"). Value;
x=x+1;
Set the Age property value in the parent window
Parent.document.getElementByIdx_x ("Age"). Value=x;
These are some of the methods and data that I collect and accumulate when I use JavaScript in my project to solve child window problems. I do this by using a modal window (which is mostly related to the project itself), but in fact there are significant differences in implementation, whether using window.open () or using Window.showmodeldialog () for parameters, First contact will feel a bit messy, but as long as the relationship between the child window and the parent window and the role, it is very good to understand.

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.