Home > Developer > JavaScript
In the actual project often have such requirements, click on a button pop-up dialog box, the dialog can edit and modify the corresponding content, and then save and close the window, if you write a static div as the display hidden, but also to adjust the style, trouble points. Now the same effect can be achieved with window.open, and the parent page and child page will be passed the same value.
The demo code is as follows:
Parent page:
HTML section:
<!--Author: Zhao yiming blog:http://www.zymseo.com time:2016/9/20 -<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "UTF-8"> <title>Parent page</title> <Metaname= "Keywords"content=""> <Metaname= "Description"content=""> <styletype= "Text/css">. Clear{position:fixed;background:Rgba (0,0,0,0.2);Top:0px; Right:0px;Bottom:0px; Left:0px;Display:None; } </style> </Head> <Body> <inputtype= "text"ID= "PARENTINPT" /> <inputtype= "button"value= "Edit"ID= "Edit" /> <!--Mask Layer - <Divclass= "Clear"></Div> </Body></HTML>
JavaScript section:
<script type= "Text/javascript" >varParentpage ={oEdit:document.getElementById (' Edit '), OParentInpt:document.getElementById (' PARENTINPT '), OClear:document.getElementsByClassName (' Clear ') [0], //Initialize MethodInit:function(){ //Click the Edit button This. Oedit.onclick = This. editfunction; }, //Open a Sub-page, initialize the height and position of the sub-pageEditfunction:function(){ varthis =Parentpage; varOparentinptval =This.oParentInpt.value; This.oClear.style.display= ' Block '; window.open (' son.html ', window, ' height=500px,width=500px,left=500px,top=0px '); } }; Parentpage.init ();</script>
Sub-page:
HTML section:
<!--Author: Zhao yiming blog:http://www.zymseo.com time:2016/9/20 -<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "UTF-8"> <title>Sub-page</title> <Metaname= "Keywords"content=""> <Metaname= "Description"content=""> </Head> <Body> <inputtype= "text"ID= "SONINPT" /> <inputtype= "button"value= "Save"ID= "Save"> </Body></HTML>
JavaScript section:
<script type= "Text/javascript" >varSonpage ={oSonInpt:document.getElementById (' SONINPT '), OParentInpt:window.opener.document.getElementById (' PARENTINPT '), OSave:document.getElementById (' Save '), //Initialize MethodInit:function(){ //the child page automatically gets the input value of the parent page This. Osoninpt.value = This. Oparentinpt.value; //Click the Save button This. Osave.onclick = This. savefunction; //listen to whether the user clicked the Close Window button on the sub-page, and if so, the valueWindow.onbeforeunload =sonpage.sontoparent; }, //SaveSavefunction:function() {sonpage.sontoparent (); Window.close (); }, //the child page passes the value to the parent page and executes:Sontoparent:function(){ varthis =Sonpage; varOsoninptval =This.oSonInpt.value; This.oParentInpt.value=Osoninptval; Window.opener.document.getElementsByClassName (' Clear ') [0].style.display = ' None '; } }; Sonpage.init ();</script>
In addition, you can use IFRAME to achieve the same technology: my blog's web front-end Development Case Library has an article: "Solve the native JS or jquery implementation of the parent window, such as Window.parent.document.getElementById."
With the open () method of the Window object, the open () method produces a new Window window object. The usage is:
window.open (url,windowname,parameters);
URL: Describes the URL of the window to be opened, how to empty it does not open any Web page;
Windowname: Description of the open window of the people said, you can use the ' _top ', ' _blank ' and other built-in name, here the name of <a href= "..." "target=" ... "the target property in > is the same.
Parameters: Describes the parameter value 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.
The parameters are described as follows:
top=# the number of pixels from the top of the screen at the top of the window;
The number of pixels from the left side of the screen left=# window;
The width of the width=# window;
The height of the height=# window;
Menubar= ... The window has no menu, value yes or no;
Toolbar= ... window has no toolbar, value yes or no;
Location= ... The window has no address bar, the value is yes or no;
Directories= ... window has no connection area, value yes or no;
Scrollbars= ... Window has no scroll bar, value yes or no;
Status= ... window has no status bar, value Yes or no;
Resizable= ... The window does not give the resizing, the value is yes or no;
JavaScript implements parent and child window values with Window.opener
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
