javascript_调用父窗口(父页面)的方法

via: http://www.php100.com/html/webkaifa/javascript/2009/0213/1658.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");

在子窗口中当希望修改父窗口中的内容时,会弹出“某某”为空或不是对象的错误,而这里的“某某”就是你想修改的父窗口中的内容

相关推荐