js调用父窗口（父页面）的方法_form表单新开窗口 js 与父页面交互-CSDN博客

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>  

实例地址： http://www.cnspry.cn/blog/attachments/window.parent 实例/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 打开的子页面调用父页面对象

码：
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");
在子窗口中当希望修改父窗口中的内容时，会弹出“某某”为空或不是对象的错误，而这里的“某某”就是你想修改的父窗口中的内容