The difference between window.parent and window.opener JavaScript calls the main window method
1: window.parent is an example of the iframe page calling the parent page object:
a.html
Html code<html>
<head><title>Parent page</title></head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
</form>
<iframe src="b.html" width=100%></iframe>
</body>
</html>
If we need to assign a value to the username text box in a.htm in b.htm, just like many upload functions, the upload function page is in Ifrmae. After the upload is successful, we put the uploaded path into the text box of the parent page.
Html code
should be written in b.html
<script type="text/javascript">
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
</script>
Instance address: http://www.cnspry.cn/blog/attachments/window.parent instance/a.html
Source code:
1.a.html
Html code
<html>
<head>
<title>Main page</title>
<script>
/** Test variables added to test the IFrame child window calling the global variables of the parent window*/
var parentVairous = "A test variable added to test the IFrame child window calling the global variable of the parent window";
function parentInvokeIFrame()
{
var iframeTest = document.frames["iframeTest"]; //Using document.getElementById("iframeTest"); can also be used
alert(iframeTest.document.body.innerHTML);
alert(iframeTest.iFrameVair);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type = "button" value = "The parent window calls the content in the IFrame child window" onclick = 'parentInvokeIFrame()'/>
</form>
<iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>
</body>
</html>
1.b.html
Html code
<html>
<head>
<title></title>
<script type="text/javascript">
/** The child window global function added to test the parent form calling the global function of the IFrame child form*/
var iFrameVair = "Test the parent form to call the global function of the IFrame child form";
functionUpdateParent()
{
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
}
function childInvokeParent()
{
var parentVairous = window.parent.window.parentVairous;
alert(parentVairous);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<p> </p>
<p align="center">
<input type = "button"
name = "button"
id = "button"
value = "Update the UserName content of the main page"
onclick = "UpdateParent()">
<input type = "button"
name = "button2"
id = "button2"
value = "Test the IFrame child window to call the global variable of the parent window"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
</html>
ps: It cannot be obtained across domains. For example, if the src of the iframe is 'http://www.xxx.ccc/', it cannot be obtained.
2: window.opener is the child page opened by window.open that calls the parent page object instance address: http://www.cnspry.cn/blog/attachments/window.opener instance/a.html
Source code:
2.a.html
Html code
<html>
<head>
<title>Main page</title>
<script type="text/javascript">
/** Test variables added to test the IFrame child window calling the global variables of the parent window*/
var parentVairous = "A test variable added to test the IFrame child window calling the global variable of the parent window";
/**
* Because it is different from IFrame (IFrame has an id, window.open() has different modes from the parent-child window of IFrame),
* So when a new window is opened through the window.open() method, there must be an object of the new window
* Of course, the sub-window must pop up first before the variables in the sub-window can be called, otherwise an exception will be thrown
*/
varOpenWindow;
function openSubWin()
{
OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location =no, status=no');
}
function parentInvokeChild()
{
if(OpenWindow)//Of course the sub-window must pop up first before the variables in the sub-window can be called, otherwise an exception will be thrown
{
alert(OpenWindow.iFrameVair);
}
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type="button" value="Pop up subpage" onclick = "openSubWin()">
<input type="button" value="Test call global variables in pop-up window" onclick = "parentInvokeChild()">
</form>
</body>
</html>
2.b.html
Html code
<html>
<head>
<title>Subpage</title>
<script type="text/javascript">
/** The child window global function added to test the parent form calling the global function of the IFrame child form*/
var iFrameVair = "Test the parent form to call the global function of the IFrame child form";
functionUpdateParent()
{
var _parentWin = window.opener;
_parentWin.form1.username.value = "xxxx" ;
}
function childInvokeParent()
{
var parentVairous = window.opener.window.parentVairous;
alert(parentVairous);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<p> </p>
<p align="center">
<input type="button"
onclick = "UpdateParent();"
name="button"
id="button"
value="Update the UserName content of the main page">
<input type = "button"
name = "button2"
id = "button2"
value = "Test the IFrame child window to call the global variable of the parent window"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
After being reminded by hanjs, it is really important to note that the child window of the modal window cannot modify any content in the parent window page.
For example, modify: OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable= yes,location=no, status=no');
For: OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");
When you want to modify the content in the parent window in the child window, an error will pop up that "XX" is empty or not an object, and "XX" here is the content in the parent window you want to modify.