如果用 javaScript 的话， 子页面用 opener 就可以引用父页面的 window， 如：
opener.document.all.txt_client_Id.value //获取值
opener.document.all.btn_client_Id.click() // 触发事件
父页面：
要调用父页面的click事件
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
load_dtg_dtl()
End Sub
调用子页面的方法：
btn_insert.Attributes.Add("onclick", "javascript:window.open('default2.aspx')")
子页面：
btn_ok.Attributes.Add("onclick", "javascript:window.opener.document.getelementbyid('LinkButton1').click()")
请问为什么我子页面调用不了父页面的click事件呢？ 哪里出了问题？
Html代码
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>无标题文档</title>
6.<script type="text/javascript">
7.var parentStr = "-----父页面的js变量-----";
8.function getValue(){
9. document.getElementById("getText").value = document.getElementById("framePage").contentWindow.document.getElementById("forParent").value;
10.}
11.function getJsVar(){
12. document.getElementById("getText").value = document.getElementById("framePage").contentWindow.childStr;
13.}
14.function getFunc(){
15. document.getElementById("framePage").contentWindow.testFunc();
16.}
17.function testFunc(){
18. alert("子页面调用了此方法！");
19.}
20.</script>
21.</head>
22.
23.<body>
24.子页面获取<input type="text" id="forChild" value="parent"/><br/>
25.<input type="text" id="getText"/>
26.<button onclick="getValue()">获得子页面的值</button><button onclick="getJsVar()">获得子页面的Js变量</button><button onclick="getFunc()">调用子页面的Js方法</button><br/><br/><br/><br/><br/>
27.
28.<iframe id="framePage" name="framePage" style="width:100%;height:500px" src="childPage.html"/>
29.</body>
30.</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var parentStr = "-----父页面的js变量-----";
function getValue(){
document.getElementById("getText").value = document.getElementById("framePage").contentWindow.document.getElementById("forParent").value;
}
function getJsVar(){
document.getElementById("getText").value = document.getElementById("framePage").contentWindow.childStr;
}
function getFunc(){
document.getElementById("framePage").contentWindow.testFunc();
}
function testFunc(){
alert("子页面调用了此方法！");
}
</script>
</head>
<body>
子页面获取<input type="text" id="forChild" value="parent"/><br/>
<input type="text" id="getText"/>
<button onclick="getValue()">获得子页面的值</button><button onclick="getJsVar()">获得子页面的Js变量</button><button onclick="getFunc()">调用子页面的Js方法</button><br/><br/><br/><br/><br/>
<iframe id="framePage" name="framePage" style="width:100%;height:500px" src="childPage.html"/>
</body>
</html>
子页面
Html代码
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>无标题文档</title>
6.<script type="text/javascript">
7.var childStr = "子页面的js变量";
8.function getValue(){
9. document.getElementById("getText").value = parent.document.getElementById("forChild").value;
10.}
11.function getParentJsVar(){
12. document.getElementById("getText").value = parent.parentStr;
13.}
14.function getFunc(){
15. parent.testFunc();
16.}
17.function testFunc(){
18. alert("父页面调用了此方法！");
19.}
20.</script>
21.</head>
22.
23.<body>
24.父页面获取<input type="text" id="forParent" value="child"/><br/>
25.<input type="text" id="getText"/>
26.<button onclick="getValue()">获得父页面的值</button><button onclick="getParentJsVar()">获得父页面的Js变量</button><button onclick="getFunc()">获得父页面的值</button>
27.</body>
28.</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var childStr = "子页面的js变量";
function getValue(){
document.getElementById("getText").value = parent.document.getElementById("forChild").value;
}
function getParentJsVar(){
document.getElementById("getText").value = parent.parentStr;
}
function getFunc(){
parent.testFunc();
}
function testFunc(){
alert("父页面调用了此方法！");
}
</script>
</head>
<body>
父页面获取<input type="text" id="forParent" value="child"/><br/>
<input type="text" id="getText"/>
<button onclick="getValue()">获得父页面的值</button><button onclick="getParentJsVar()">获得父页面的Js变量</button><button onclick="getFunc()">获得父页面的值</button>
</body>
</html>
经验总结：
1. 子页面调用父页面不会有什么大的问题。但父页面调用子页面时需要确保子页面已经加载完成，不然就会报错。这个无需多说。 有两种解决方式：
1) 在父页面用setTimeout设置延时调用
2) 在子页面onload完成后，触发父页面来调用子页面。
2. 注意：在web开发过程中，有时出现问题，需要考虑HTML 文档遵循的文档类型是否有影响。
如：<!DOCTYPE html 。。。。。。。。
window.parent与window.opener的区别 javascript调用主窗口方法
1： window.parent 是iframe页面调用父页面对象
举例:
a.html
Html代码 <html>
<head><title>父页面</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>
如果我们需要在b.htm中要对a.htm中的username文本框赋值，就如很多上传功能，上传功能页在Ifrmae中，上传成功后把上传后的路径放入父页面的文本框中
我们应该在b.html中写
Html代码
<script type="text/javascript">
var _parentWin = window.parent ;
_parentWin.form1.username.value = "xxxx" ;
</script>
实例地址： 实例/a.html
源码：
1.a.html
Html代码
<html>
<head>
<title>主页面</title>
<script>
/** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */
var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";
function parentInvokeIFrame()
{
var iframeTest = document.frames["iframeTest"]; //使用document.getElementById("iframeTest");同样可以
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 = "父窗口调用IFrame子窗口中的内容" onclick = 'parentInvokeIFrame()'/>
</form>
<iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>
</body>
</html>
1.b.html
Html代码
<html>
<head>
<title></title>
<script type="text/javascript">
/** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */
var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";
function UpdateParent()
{
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 = "更新主页面的UserName内容"
onclick = "UpdateParent()">
<input type = "button"
name = "button2"
id = "button2"
value = "测试IFrame子窗口调用父窗口的全局变量"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
</html>
ps:不能跨域获取，例如iframe的src是'http://www.xxx.ccc/'就不可以
2： window.opener 是window.open 打开的子页面调用父页面对象
实例地址： 实例/a.html
源码：
2.a.html
Html代码
<html>
<head>
<title>主页面</title>
<script type="text/javascript">
/** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */
var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";
/**
* 因为不同于IFrame（IFrame有id,window.open()与IFrame的父子窗口的模式不同）,
* 所以当是通过window.open()方法打开一个新窗口使, 必须有一个新窗口的对象
* 当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常
*/
var OpenWindow;
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)//当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常
{
alert(OpenWindow.iFrameVair);
}
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type="button" value="弹出子页面" onclick = "openSubWin()">
<input type="button" value="测试调用弹出窗口中的全局变量" onclick = "parentInvokeChild()">
</form>
</body>
</html>
2.b.html
Html代码
<html>
<head>
<title>子页面</title>
<script type="text/javascript">
/** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */
var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";
function UpdateParent()
{
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="更新主页面的UserName内容">
<input type = "button"
name = "button2"
id = "button2"
value = "测试IFrame子窗口调用父窗口的全局变量"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
经过hanjs的提醒，确实需要注意的是，模态窗口的子窗口是没有办法修改父窗口页面中的任何内容的。
例如修改：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');
为：OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");
在子窗口中当希望修改父窗口中的内容时，会弹出“某某”为空或不是对象的错误，而这里的“某某”就是你想修改的父窗口中的内容
父子页面相互调用是一个在开发中经常遇到的问题，但是没有找到过比较全面的文章介绍。在此总结下来，供大家参考。
四种方式
一般情况下，我们可以使用iframe、window的open、showModalDialog、showModelessDialog方法这四种方式打开一个子窗口。(showModalDialog、showModelessDialog是IE独有的。)
下面分这四种方式来讨论如何父子页面互相调用。
分情况讨论
iframe
在这种情况下，子页面直接通过parent.var就可以对父页面的变量和方法进行操作。
父页面可以通过拿到iframe的contentWindow对象来访问子页面的window。
父页面代码，文件名为iframe.html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
var childFrame;
function getChildVar(){
var childFrame = document.getElementById("childFrame");
var childWindow = childFrame.contentWindow
alert(childWindow.testVar);
}
</script>
<iframe id="childFrame" name="childFrame" frameBorder="0" src="iframe.child.html" style="border:1px solid black;">
</iframe>
<br />
<button onclick="getChildVar();">拿到子页面的变量</button>
</body>
</html>
子页面代码，文件名为iframe.child.html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
</script>
我是在IFrame中的子窗体。
<button onclick="alert(parent.testVar);">拿到父页面的testVar</button>
</body>
</html>
open
使用window.open打开的子页面，在子页面中可以通过window.opener来访问父页面的window对象。
在父页面中，可以通过window.open方法的返回值拿到子页面的window，就可以操作子页面的变量和方法。
父页面代码，文件名为window.open.html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>window.open父页面</title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
var childFrame;
function openWindow(){
childFrame = window.open("window.open.child.html");
}
function getChildVar(){
alert(childFrame.testVar);
}
</script>
<button onclick="openWindow();">使用window.open打开子页面</button>
<button onclick="getChildVar();">拿到子页面的变量</button>
</body>
</html>
子页面代码，文件名为window.open.child.html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>window.open子页面</title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
alert(window.opener.testVar);
</script>
</body>
</html>
showModalDialog
使用showModalDialog打开的子页面，如果想访问父页面的window，需要在执行showModalDialog方法的时候，把父页面的window当作参数传递过去。见父页面的代码。
因为showModalDialog是阻塞的，父页面的代码在子页面不关闭之前无法继续执行，所以只能通过returnValue拿到子页面的变量，见子页面的代码。
父页面代码，文件名为ShowModalDialog.html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ShowModalDialog父页面</title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
function openDialog(){
var testVar = showModalDialog("ShowModalDialog.Child.html",window);
alert(testVar);
}
</script>
<button onclick="openDialog();">OpenDialog</button>
</body>
</html>
子页面代码，文件名为ShowModalDialog.Child.html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ShowModalDialog子页面</title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
function getParent(){
var parentWindow = window.dialogArguments;
alert(parentWindow.testVar);
}
function closeMe(){
returnValue = testVar;
window.close();
}
</script>
我是使用ShowModalDialog打开的子页面。
<br />
<button onclick="getParent()">getParent</button>
<button onclick="closeMe()">closeMe</button>
</body>
</html>
showModelessDialog
使用showModelessDialog打开的子页面，同样需要在执行方法的时候，把父页面的window当作参数传递过去。
但不同之处在于showModelessDialog会直接返回子页面的window对象，不是阻塞的，可以直接对子页面的方法和变量进行访问。
父页面代码，文件名为ShowModelessDialog.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ShowModalDialog父页面</title>
</head>
<body>
<script>
var testVar = "我是父窗口测试变量";
function openDialog(){
var childWindow = showModelessDialog("ShowModelessDialog.Child.html",window);
alert(childWindow.testVar);
}
</script>
<button onclick="openDialog();">OpenDialog</button>
</body>
</html>
子页面代码，文件名为ShowModelessDialog.html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ShowModalDialog子页面</title>
</head>
<body>
<script>
var testVar = "我是子窗口测试变量";
function getParent(){
var parentWindow = window.dialogArguments;
alert(parentWindow.testVar);
}
function closeMe(){
returnValue = testVar;
window.close();
}
</script>
我是使用ShowModalDialog打开的子页面。
<br />
<button onclick="getParent()">getParent</button>
<button onclick="closeMe()">closeMe</button>
</body>
</html>