Home > Others

JS Child Parent Window Value Assignment Detailed introduction

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

child window assignment to parent window

The code is as follows Copy Code
<script>
function Openwin (str) {
window.open (siteurl+ "popup/" +str, NULL, ' width=800,height=500 '); Open a Window
}
</script>
<input type= "text" id= "title" Name= "Picpath" value= "<?php if (Isset ($pic)) {echo $pic [' Path ']; > "/>
<a href= "javascript:;" onclick= "Openwin (' searchpic ');" > Pictures </a>

child window:

The code is as follows Copy Code


<title> Image Search </title>
<body>
<script>
function GetValue () {
Window.opener.document.getElementById (' title '). Value = document.getElementById (' Picpath '). Value//Assignment
Window.close (); Close window
}
</script>
<input type= "text" id= "Picpath"/>
<input type= "button" value= "OK" onclick= "getValue ()"/>
</body>


1. 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:

The code is as follows Copy Code

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:

The code is as follows Copy Code

var newwin=window.showmodeldialog (Url,window, "");
Newwin.open ();

The parameter window is the parent window object at this time

Example


A page <script type= "Text/javascript" >

The code is as follows Copy Code

function popUp (URL) {
Objsubwin = window.open (URL, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0," Width=300,height=80 ");
Objsubwin.focus ();
}

Function SetValue (val) {
var amount = document.getElementById (' <% = Textboxamount.clientid%> ');
Amount.value = val;
}

</script>
[CSharp]
<asp:textbox id= "Textboxamount" runat= "Server" enabled= "false" ></asp:TextBox>
<asp:button id= "Button1" runat= "Server" text= "Call child window" onclientclick= "popUp (' pageb.aspx ')"/>

b page:
<script type= "Text/javascript" >
function IsNumeric (keycode) {
Return ((keycode >= && keycode <=) | | keycode = 8)
}

Function Calc () {
if (Window.opener!= null &&!window.opener.closed) {
var qty = document.getElementById (' <% = Textboxqty.clientid%> ');
var price = document.getElementById (' <% = Textboxprice.clientid%> ');

Window.opener.SetValue (parseint (qty.value) * parseint (Price.value));
}
}
</script>
Quantity <asp:textbox id= "Textboxqty" runat= "Server" onkeydown= "return IsNumeric (Event.keycode);" onpaste= "return false;" Width= "></asp:TextBox>"
* Unit Price <asp:textbox id= "Textboxprice" runat= "Server" onkeydown= "return IsNumeric (Event.keycode);" Onpaste= "return false; " Width= "></asp:TextBox>"
<asp:button id= "Button1" runat= "Server" text= "Calculate" onclientclick= "calc ()"/>

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:

The code is as follows Copy Code
var parent=widnow.dialogarguments;

Variable parent is the parent window object.

For example:

The code is as follows Copy Code

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:

The code is as follows Copy Code

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:

The code is as follows Copy Code

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:

The code is as follows Copy Code

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;


The contents of the child window interacting with the parent window are the information passed to the parent window by the handle window, and so on, or the parent window transmits its own information to the child window and so on.

1. The parent window passes information to the child window

See code example:

  code is as follows copy code

<script language=javascript>

Function outPut ()
{
// Gets the text information assignment for the parent window to text
var text = Document.abc.text.value;
//Open the child window and assign the action handle to the win variable, all of the following actions are for the win object's
var win = window.open ("", "Mywin", "Menubar=no,width=400,height=100,resizeable=yes");
//Output basic information
Win.document.writeln ("<title> output </title>");
Win.document.writeln ("Your message is: <p > ");
//output information obtained from the parent window
Win.document.writeln (text);
Win.document.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. child window passes parameters to parent window

We are transforming the code above:

The code is as follows Copy 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.document.writeln ("<title> output result </title>");
Win.document.writeln ("Your message is:<p>");
Win.document.writeln (text);
Win.document.writeln ("<input type=text name=child value= child window Information >");

The child window itself, using the Self object, uses the opener object for the parent window operation, which is the key
The value of the form in the handle window is passed back to the parent window, replacing the previous value of the parent window form, and then closing the child window
Win.document.writeln ("<input Type=button value= closes itself onclick= window.opener.abc.text.value=self.child.value; Self.close () > ");
You can control the shutdown of the parent window
Win.document.writeln ("<input type=button value= Close parent window onclick= Window.opener.opener=null;window.opener.close () > ");
Refreshing the parent window
Win.document.writeln ("<input Type=button value= Refresh parent window onclick= window.opener.location.reload () >");

Win.document.close ();
Win.focus ();
}
</script>

<form NAME=ABC method=post>
<input Type=text Name=text size=50>
<input Type=button Value= submitted onclick= "OutPut ()" >

</form>


3. Not interacting with child and parent windows of the page

If we are involved in external programs, such as PHP, ASP, etc., then we can deal with two pages, for example, upload function, we just need to open a new page, and then the new page to pass the values to the parent page.

The code is as follows Copy Code

Local Code instance:

<input type= "Input" value= "name=" input_tag "id =" Input_tag "onkeyup=" Clearpretagstyle () "Size=" 40″>
<input type= "hidden" value= "0″name=" TagID "id=" >
<input type= Button "value=" label "onclick=" Popupwindow (tag.php?tag= +escape (Document.tryst_form.input_tag.value)) ">

The above is part of the code of the parent window, inside the Popupwindow is encapsulated good window.open function, so understand the tag.php is another page can be, we need to submit the value of the current form to the tag.php page to deal with.


tag.php part of the code:

Query Label results:

The code is as follows Copy Code

<a href= "#" Name= "tag_1″> Life </a><a href=" # "onclick=" Opener.document.tryst_form.input_tag.value = Document.tag_1.innerHTML "> Add the Label </a>

<a href= "#" Name= "tag_2″> Life Show </a><a href=" # "onclick=" Opener.document.tryst_form.input_tag.value = Document.tag_2.innerHTML "> Add the Label </a>

This is our child window, G:W7, e-education, net e we want to return tag_1 and tag_2 to the child window, although they are not the same page. Here's a bit of knowledge about how we get the values in the connection, we use the InnerHTML attribute: Document.tag_2.innerHTML This is the Tag_2 value "life Show" that we get, and we can use other methods to get it, For example: Document.all.tag_2.innerHTML,

Or this.innerhtml refers to the value of the link itself.


Access to the parent window is also handled using the opener object: Opener.document.tryst_form.input_tag.value,

You can change the value of the parent window.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
kill child process parent dies value assignment js window parent reference to child object in java java parent class call child method js set input value js get input value

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More