Mutual Call between Child Window and Parent Window in JavaScript

  • 2021-07-18 06:45:01
  • OfStack

Note: You must open it with open. If you open it with openModal, you will not be able to access opener.

Parameters of open:


window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') 

Parameter description

The file name of the 'page. html' pop-up window; 'newwindow' pop-up new window name, not required, can be replaced by empty '';

height=100 height; width=400 width; top=0 The pixel value of the window from the top of the screen; left=0 The pixel value of the window from the left side of the screen;

toolbar = whether no displays toolbar and yes displays; menubar and scrollbars represent menu bar and scroll bar;

resizable = no is allowed to change the window size, yes is allowed; location=no whether the address bar is displayed, yes is allowed;

status = no whether the information in the status bar is displayed (usually the file has been opened), yes is allowed;

1. Passing values from child windows to parent windows

If the parent page has 1 control of id that is choosedProvider, then the value can be passed to the parent page:


opener.document.getElementById("choosedProvider").value="Tom"; 

2. Pass the value from the parent window to the child window. For example, there are controls with id as T in the child window. At this time, the following value can be passed:


<script> 
var newWindow; 
function openWindow(url){ 
newWindow = window.open( " new.htm " , "", "width=400,height=300 "); 
} 
function changeChild(){ 
newWindow.document.getElementById("T").value=" I've changed "; 
} 
</script> 

3. The child window closes and refreshes the parent port. There are two ways:

1) Close parent window when child window closes:


opener.location.reload(); 
window.close();  

2) The parent window detects whether the child window has been closed, and automatically refreshes after a set period of time:


<script> 
var newWindow; 
var timer; 
function openWindow(url) { 
    newWindow = window.open(url, "", "width=400,height=300,resizable=yes"); 
    timer = setInterval("updateAfterClose()", 1000); 
} 
function updateAfterClose() { 
    // The parent window detects whether the child window is closed, and then refreshes the parent window by refreshing itself instead of the child window  
    if(newWindow.closed == true) { 
    clearInterval(timer); 
    self.location.reload(); //  Main window refresh  
    return; 
    } 
} 
</script> 

4. Close the child window when the parent window is closed. This is the method to detect the onunload event of the parent window:


<script> 
var newWindow; 
function openWindow(url) { 
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");  
} 
function closeChild() 
{ 
newWindow.close(); 
} 
</script> 

Add the onunload event to body:


<body onunload="closeChild()">  

5. Close the parent window in the child window. This function may be relatively less than 1 point:


<script> 
function closeParent() 
{ 
opener.close(); 
} 
</script> 
<input type=button value=" Close parent window " onclick=closeParent()> 

Related articles: