Home > Developer > JavaScript

JavaScript calls the parent window program code detailed

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

Parent-side page code:

The code is as follows Copy Code

<! DOCTYPE HTML Public "-//ietf//dtd level1//en" >
<title>html.html</title>

<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--<link rel= "stylesheet" type= "Text/css" href= "./styles.css" >-->
<body>

<div>
<button id= "BTN" >open new page</button>
</div>

<script>

Window.onload=function () {

var btn = document.getElementById ("btn");

Btn.onclick = Openpage;

function Openpage () {
try {
window.open (' newpage.html ');
}catch (e) {
Alert (e);
}
Alert ("OK");
}
}
Function Show () {
Document.title=new Date ();
}
</script>
</body>

Newpage.html code requires an open page

  code is as follows copy code

<! DOCTYPE HTML Public "-//ietf//dtd level1//en" >
<title>newpage.html< /title>

<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= " Description "content=" is the "my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8" >
<!--<link rel= "stylesheet" type= text/css "href="./styles.css ">-->
< body>
<button id= "btn" onclick= "Fun ()" > click </button>
<script>

Function fun () {
Opener.show ();
}

</script>
</body>

Close child windows when the parent window is closed
Write in parent window:

The code is as follows Copy Code

var Sonid = window.open (' "
+ Url2 + "', ' newwindow ', ' height=108, width=200, top="
+ Top + ', left= ' + Left
+ ", Toolbar=no, Menubar=no, Scrollbars=no, Resizable=no,location=no,"
+ "Status=no,titlebar=no,z-look=1,depended=yes,alwaysraised=yes")

Window.attachevent ("OnUnload", Closesonwin);
function Closesonwin ()
{
Sonid.close ();
}


Child parent Window Operation value Assignment


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

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:

  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
parent.document.getElementByIdx_x ("age") in the parent window. Value=x

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:
javascript trace function calls get parent class name javascript window header location in javascript cookies javascript example program javascript execute program javascript chat program asp net close window from code behind
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

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