The examples in this article describe the methods that JavaScript child windows Call Parent window variables and functions. Share to everyone for your reference. Specific as follows:
Example 1: Child window is a newly opened window
Parent window:
?
| 1234567891011121314151617 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" http://www.w3.org/1999/xhtml"> <title>parent</title> <script type="text/javascript"> varparentPara=‘parent‘; functionparentFunction() { alert(parentPara); } </script><body> <button onclick="parentFunction()">显示变量值</button> <button onclick="window.open(‘child.html‘)">打开新窗口</button></body> |
child window:
?
| 12345678910111213141516 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" http://www.w3.org/1999/xhtml"> <title>child</title> <script type="text/javascript"> functionmodify() { opener.parentPara=‘child‘; } </script><body> <button onclick="opener.parentFunction()">调用父页面的方法</button> <button onclick="modify()">更改父页面中变量的值</button> </body> |
You can access the specified resources as long as you add opener to the variables and functions.
However, when the parent window is closed, the use of this error will be reported as: "The object being called has been disconnected from its client." "
Example 2: A child page is an IFRAME of the parent page
Parent page:
?
| 1234567891011121314151617181920212223 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" http://www.w3.org/1999/xhtml"> <title>parent</title> <script type="text/javascript"> functionfill() { //alert(frame1.window.childPara); //显示frame1内的变量值 varstr=document.getElementById(‘txt1‘).value; //获得文本框内输入的值 frame1.window.div1.innerHTML=str; //将值填入子页面的一个div中 } </script><body> <div style="width:300px;height:300px;"> 父页面 <iframe id="frame1"src="child.html"frameborder="0"scrolling="no"width="120px"height="120px"></iframe> <br/><br/><br/><br/> <input id="txt1"type="text"/> <button onclick="fill()">将文本框内值填充入子界面</button> </div></body> |
Sub-page:
?
| 1234567891011121314151617181920 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" http://www.w3.org/1999/xhtml"> <title>child</title> <script type="text/javascript"> functionfun() { parent.fill(); } </script><body> <div style="width:100px;height:100px;"> <b>子页面</b><br/> <a href="#"onclick="fun()">同父页面按钮</a> <div id="div1"style="color:red;"> </div> </div></body> |
Small discovery: When the parent page is refreshed, the IFRAME is refreshed with it, and the parent page is not refreshed when the IFRAME is refreshed.
Hopefully this article will help you with JavaScript programming.
JavaScript child windows methods for calling parent window variables and functions
