程序博客网 > linux学了有什么用

JavaScript 实现父,子页面(窗口)方法之间的相互调用

来源：互联网 发布：linux学了有什么用 编辑：程序博客网 时间：2024/06/06 18:40

window.parent与window.opener的区别 javascript调用主窗口方法
1：   window.parent 是iframe页面调用父页面对象
举例:
a.html


Html代码

  1. <html>  
  2.     <head><title>父页面</title></head>  
  3. <body>  
  4.     <form name="form1" id="form1">  
  5.          <input type="text" name="username" id="username"/>  
  6.     </form>  
  7.     <iframe src="b.html" width=100%></iframe>  
  8. </body>  
  9. </html>  

如果我们需要在b.htm中要对a.htm中的username文本框赋值，就如很多上传功能，上传功能页在Ifrmae中，上传成功后把上传后的路径放入父页面的文本框中
我们应该在b.html中写

 

Html代码 复制代码
  1. <script type="text/javascript">  
  2.     var _parentWin = window.parent ;   
  3.     _parentWin.form1.username.value = "xxxx" ;   
  4. </script>  


实例地址：  http://www.cnspry.cn/blog/attachments/window.parent 实例/a.html
源码：
1.a.html

Html代码 复制代码
  1. <html>  
  2. <head>  
  3.     <title>主页面</title>  
  4.     <script>  
  5.         /** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */   
  6.         var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";   
  7.         function parentInvokeIFrame()   
  8.         {   
  9.                 var iframeTest = document.frames["iframeTest"]; //使用document.getElementById("iframeTest");同样可以   
  10.                 alert(iframeTest.document.body.innerHTML);   
  11.                 alert(iframeTest.iFrameVair);   
  12.         }   
  13.     </script>  
  14. </head>  
  15. <body>  
  16. <form name="form1" id="form1">  
  17.     <input type="text" name="username" id="username"/>  
  18.     <input type = "button" value = "父窗口调用IFrame子窗口中的内容" onclick = 'parentInvokeIFrame()'/>  
  19. </form>  
  20. <iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>  
  21. </body>  
  22. </html>  


1.b.html 代码

Java代码 复制代码
  1. <html>   
  2.      <head>   
  3.          <title></title>   
  4.          <script type="text/javascript">   
  5.             /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */  
  6.          var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";   
  7.             
  8.          function UpdateParent()   
  9.          {   
  10.              var _parentWin = window.parent ;   
  11.              _parentWin.form1.username.value = "xxxx" ;   
  12.          }   
  13.             
  14.          function childInvokeParent()   
  15.          {   
  16.                 var parentVairous = window.parent.window.parentVairous;   
  17.                 alert(parentVairous);      
  18.          }   
  19.        </script>   
  20.     </head>   
  21. <body>   
  22.      <form name="form1" id="form1">   
  23.          <p>  </p>   
  24.          <p align="center">   
  25.             <input type = "button"    
  26.                    name = "button"    
  27.                    id = "button"    
  28.                    value = "更新主页面的UserName内容"    
  29.                    onclick = "UpdateParent()">   
  30.             <input type = "button"  
  31.                          name = "button2"  
  32.                          id = "button2"  
  33.                          value = "测试IFrame子窗口调用父窗口的全局变量"  
  34.                          onclick = "childInvokeParent();"/>   
  35.          </p>   
  36.          <p>  </p>   
  37.      </form>   
  38. </body>   
  39. </html>  


ps:不能跨域获取，例如iframe的src是'http://www.xxx.ccc/'就不可以

2：   window.opener 是window.open 打开的子页面调用父页面对象
实例地址：  http://www.cnspry.cn/blog/attachments/window.opener 实例/a.html

源码：
2.a.html

Html代码 复制代码
  1. <html>  
  2. <head>  
  3.      <title>主页面</title>  
  4.      <script type="text/javascript">  
  5.      /*为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */     
  6.      var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";    
  7.         
  8.      /*    
  9.       *  因为不同于IFrame（IFrame有id,window.open()与IFrame的父子窗口的模式不同）,   
  10.       *  所以当是通过window.open()方法打开一个新窗口使, 必须有一个新窗口的对象    
  11.       *  当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常   
  12.       */   
  13.      var OpenWindow;   
  14.         
  15.      function openSubWin()   
  16.      {   
  17.          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');   
  18.      }   
  19.      function parentInvokeChild()     
  20.      {     
  21.          if(OpenWindow)//当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常            
  22.          {   
  23.                alert(OpenWindow.iFrameVair);   
  24.          }   
  25.      }    
  26.      </script>  
  27. </head>  
  28. <body>  
  29.     <form name="form1" id="form1">  
  30.         <input type="text" name="username" id="username"/>  
  31.         <input type="button" value="弹出子页面" onclick = "openSubWin()">  
  32.         <input type="button" value="测试调用弹出窗口中的全局变量" onclick = "parentInvokeChild()">  
  33.     </form>  
  34. </body>  
  35. </html>  


2.b.html 代码

Html代码 复制代码
  1. <html>  
  2.     <head>  
  3.         <title>子页面</title>  
  4.         <script type="text/javascript">  
  5.          /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */     
  6.          var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";   
  7.          function UpdateParent()   
  8.          {   
  9.               var _parentWin = window.opener;   
  10.               _parentWin.form1.username.value = "xxxx" ;   
  11.          }   
  12.          function childInvokeParent()     
  13.          {     
  14.               var parentVairous = window.opener.window.parentVairous;     
  15.               alert(parentVairous);        
  16.          }   
  17.         </script>  
  18.     </head>  
  19. <body>  
  20. <form name="form1" id="form1">  
  21. <p>  </p>  
  22. <p align="center">  
  23.     <input type="button"    
  24.                onclick = "UpdateParent();"    
  25.                name="button"    
  26.                id="button"    
  27.                value="更新主页面的UserName内容">  
  28.     <input type = "button"     
  29.            name = "button2"     
  30.            id = "button2"     
  31.            value = "测试IFrame子窗口调用父窗口的全局变量"     
  32.            onclick = "childInvokeParent();"/>     
  33. </p>  
  34. <p>  </p>  
  35. </form>  
  36. </body>  



最后是关于模态窗口
window.open的写法：
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");

模态窗口调用父窗口也是window.parent来处理的，而window.open是通过opener对象来调用父窗口的成员变量。但是模态和window.open有个功能上的区别就是，模态的窗口不能刷新父页面（刷新整个页面，比如用window.location或form.submit等的处理），而使用window.open就可以进行刷新父窗口的操作


补充知识：
父窗口关闭，再关闭子窗口，不报错代码,添加到关闭子窗口的事件方法上的代码

Javascript代码 复制代码
  1. if(window.opener.closed){   
  2.    window.close();   
  3.    return;   
  4. }  



或者：

Javascript代码 复制代码
  1. try{   
  2.   //需要捕获异常的代码块......   
  3. }catch(e){   
  4.   window.close();   
  5. }  

linux学了有什么用 linux学了有什么用
原创粉丝点击
热门IT博客
php 取字符串最后一位php 取字符串最后一位
摇滚书籍知乎摇滚书籍知乎
php7权威编程
崛起网络兼职是真的吗
非打印字符 c语言
暴利产品淘宝客推广
网络录像机能有声音吗
android 防止sql注入
面码仁太 知乎
2015年8月进出口数据
什么软件可以透视
php实战 商城系统开发
宏盟媒体集团 知乎
淘宝店铺代码在线生成
上海网络教研
oracle数据库使用手册
淘宝三只松鼠
深圳网络优化
陈丹丹淘宝店
素描照片软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 东方红旋耕机 东方红装饰 东方红保健品 东方红曲谱 东方红白酒 东方红睿华 东方红茶叶 东方红舞斗 东方红饺子馆 宇业东方红郡 东方红农用车价格 东方红睿丰混合基金 大型舞蹈史诗东方红 东方网 手机东方财畗网 东方网力 东方财畗网手机版 东方财畗网 东方财富手机网 东方网力股票 300367东方网力 东方女性网 300367东方网力股吧 东方财畗网电脑版 东方财富基金网 东网 东方网力科技股份有限公司 东方网力刘光 eastday 东方翔 东方舞 舞蹈东方红扇子舞 东方舞是什么舞 大英东方国际酒店 东方荟新中式家具图片 东方荟 修炼成仙路 东方游龙 上海儿童医院东方路 东方通股票 东方通股吧 300379东方通股吧

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里