子窗口调用父窗口变量和函数示例

来源：互联网发布：mac ae插件安装位置编辑：程序博客网时间：2024/05/29 07:39

示例1：子窗口是新打开的窗口

父窗口:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><head>    <title>parent</title>    <script type="text/javascript">var parentPara='parent';function parentFunction() {alert(parentPara);}    </script></head><body><button onclick="parentFunction()">显示变量值</button>    <button onclick="window.open('child.html')">打开新窗口</button></body></html>

子窗口:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><head>    <title>child</title><script type="text/javascript">function modify() {opener.parentPara='child';}    </script></head><body><button onclick="opener.parentFunction()">调用父页面的方法</button><button onclick="modify()">更改父页面中变量的值</button></body></html>

只要在变量和函数前面加opener就可以访问指定资源了。

但是当父窗口被关闭时，再如此使用会报一个错："被调用的对象已与其客户端断开连接。"

示例2：子页面是父页面的一个iframe

父页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><head>    <title>parent</title>    <script type="text/javascript">function fill() {//alert(frame1.window.childPara);//显示frame1内的变量值var str=document.getElementById('txt1').value; //获得文本框内输入的值frame1.window.div1.innerHTML=str; //将值填入子页面的一个div中}    </script></head><body><div style="background-color:yellow;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></html>

子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><head>    <title>child</title><script type="text/javascript">function fun() {parent.fill();}    </script></head><body><div style="background-color:lightblue;width:100px;height:100px;"><b>子页面</b><br/><a href="#" onclick="fun()">同父页面按钮</a><div id="div1" style="color:red;"></div></div></body></html>

小发现：刷新父页面时，其中的iframe也会随之刷新；刷新iframe时，父页面不会刷新。