子页面调用父页面函数



如果用 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>
 














posted on 2012-03-13 22:27 青蛙學堂 阅读(1837) 评论(0)  编辑 收藏 引用 所属分类: 軟件布袋

只有注册用户登录后才能发表评论。
<2012年3月>
26272829123
45678910
11121314151617
18192021222324
25262728293031
1234567

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜