javascript_调用父窗口（父页面）的方法-CFANZ编程社区

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");

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