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()>