热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> AJAX编程>>正文内容

总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作【附示例】

发布时间:2010年03月03日点击数: 佚名

一、Iframe 篇  【通篇示例下载

  1. //&&&&&&&&&&&&&&&&&&&&公共方法开始&&&&&&&&&&&&&&& 
  2. //父对象得到子窗口的值 
  3. //ObjectID是窗口标识,ContentID是元素ID 
  4. function GetValue(ObjectID,ContentID) 
  5.        var IsIE = (navigator.appName == 'Microsoft Internet Explorer'
  6.                      if(IsIE) 
  7.                      {//如果是IE          
  8.                             alert(document.frames(ObjectID).document.getElementById(ContentID).innerHTML);                               
  9.                      } 
  10.                      else 
  11.                      {//如果是FF 
  12.                              alert(document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML); 
  13.                                    //FF下不支持innerText; 下面是解决方法                      
  14.                                    //if(document.all){ 
  15.                                    //  alert(document.getElementById('div1').innerText); 
  16.                                    //} else{ 
  17.                                    //  alert(document.getElementById('div1').textContent); 
  18.                                    //} 
  19.                      }     
  20.   
  21. //父对象向子窗口赋值 
  22. //ObjectID是窗口标识,ContentID是元素ID 
  23. function SetValue(ObjectID,ContentID) 
  24. var IsIE = (navigator.appName == 'Microsoft Internet Explorer'
  25.               if(IsIE) 
  26.               {//如果是IE          
  27.                      document.frames(ObjectID).document.getElementById(ContentID).innerHTML="我是IE下通过父窗口赋值过来的";                             
  28.               } 
  29.               else 
  30.               {//如果是FF 
  31.                       document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML="我是FF下通过父窗口赋值过来的";                   
  32.               }     
  33. //&&&&&&&&&&&&&&&&&&&&公共方法结束&&&&&&&&&&&&&&& 

1.父窗口对子窗口操作

刷新:

  1. document.getElementById("IframeID").src=document.getElementById("IframeID").src+"?_="+Math.random(); 

上面这种方法有时需要对“src”属性处理一下。

取值:

  1. //父窗口取子窗口的值 
  2.        GetValue("Iframe1","IframeDiv"); 

赋值:

  1. //父窗口设置窗口元素的值; 
  2.        SetValue("Iframe1","IframeDiv");   

2.子窗口操作父窗口

刷新:

  1. (1)、window.parent.location.href=window.parent.location.href;   
  2.          (2)、window.parent.location.reload(); 
  3.             (3)、大家可以补充 

取值:

  1. alert(window.parent.document.getElementById("IframeDiv").innerHTML);    

赋值:

  1. window.parent.document.getElementById("IframeDiv").innerHTML="我是从子窗口IFRAME传过来的值"

关闭:

  1. window.parent.opener=null;//如果不加这句,会提示关闭询问窗口; 
  2. window.parent.close(); 

二、window.open 篇
1.父窗口对子窗口操作
打开:

  1. var win=null
  2. win=window.open("Open.html","win","width=200,height=200"); 

最大化:

  1. //窗口最大化 
  2. function SonMaximize() 
  3.        if(win&&win.open&&!win.closed) 
  4.        { 
  5.               win.moveTo(-4,-4); 
  6.               win.resizeTo(screen.availWidth+8,screen.availHeight+8); 
  7.        }else
  8.               alert('还没有打开窗口或已经关闭'); 
  9.        } 

最小化:

  1. //窗口最小化 
  2. function SonMinimize() 
  3.        if(win&&win.open&&!win.closed) 
  4.        { 
  5.               win.resizeTo(0,0); 
  6.               win.moveTo(0,window.screen.width); 
  7.        }else
  8.        alert('还没有打开窗口或已经关闭'); 
  9.        }     

关闭:

  1. //关闭窗口 
  2. function CloseSon() 
  3.        if(win&&win.open&&!win.closed) 
  4.        { 
  5.               win.opener=null
  6.               win.close() 
  7.        }else
  8.               alert('还没有打开窗口或已关闭') ; 
  9.        } 

刷新:

  1. //刷新 
  2. function RefreshSon() 
  3.        if(win&&win.open&&!win.closed) 
  4.        { 
  5.               win.location.reload(); 
  6.               win.focus(); 
  7.        }else
  8.               alert('窗口还没有打开或已关闭'); 
  9.        } 

查看窗口大小:

  1. function ViewSonSize() 
  2.        if(win&&win.open&&!win.closed) 
  3.        { 
  4.               alert(win.document.body.clientWidth+'*'+win.document.body.clientHeight); 
  5.               win.focus(); 
  6.        }else 
  7.        { 
  8.               alert(' 还没有打开窗口或者已关闭'); 
  9.        }     

取值:

  1. alert(window.document.getElementById("OpenDiv").innerHTML); 

赋值:

  1. win.document.getElementById("OpenDiv").innerHTML="我是从父窗口中传过来的值"

2.子窗口操作窗口

刷新:

  1. window.opener.location.reload(); 
  2.        //下面这种方法也可以 
  3.        //window.parent.location.href=window.parent.location.href; 

关闭本窗口:

  1. //关闭本窗口 
  2. function CloseWindow() 
  3. {     //window.opener.opener=null; 
  4.        window.close(); 

关闭父窗口:

  1. //关闭父窗口 
  2. function CloseParent() 
  3. {     //火狐下不起作用,如果要想起作用。用下面的方法 
  4.     //开firefox,在地址栏输入about:config       
  5.        //找到dom.allow_scripts_to_close_windows这项并改为true 
  6.               var IsIE = (navigator.appName == 'Microsoft Internet Explorer'
  7.               if(IsIE){//如果是IE             
  8.                      window.opener.opener=null
  9.                      window.opener.close(); 
  10.                      window.close();      
  11.               }else
  12.                      alert("火狐不能直接关闭;需要以下设置1.开firefox,在地址栏输入about:config;2.找到dom.allow_scripts_to_close_windows这项并改为true"); 
  13.               } 
  14.        

取值:

  1. alert(window.opener.document.getElementById("OpenDiv").innerHTML);  

赋值:

  1. window.opener.document.getElementById("OpenDiv").innerHTML="我是从子窗口Open传过来的值"

三、模态窗口篇
1.父窗口操作子窗口
父窗口JS代码:

  1. var parValue="现在显示了父窗口中的变量值"
  2. var hao="郝建卫"
  3. function ShowDailog(PageHref,Title,Height,Width) 
  4.        //--------------left位置 
  5.        //screen.availHeight声明了显示浏览器的屏幕的可用宽度 
  6.        var dleft =(screen.availHeight-Height)/2; 
  7.        //--------------top位置 
  8.        var dtop =(screen.availWidth-Width)/2; 
  9.        //--------------- 
  10.   
  11. Var sRet = window.showModalDialog(PageHref,window,Title,"scrollbars=yes;resizable=no;help=no;status=no;center=yes;dialogTop=25;dialogLeft="+ dleft +";dialogTop="+ dtop +";dialogHeight="+Height+"px;dialogWidth="+Width+"px;"); 
  12.        //--------return 
  13.        if (sRet =="refresh")//这种是利用返回值来刷新父页面 
  14.        { 
  15.               window.Test="true"
  16.               window.location.reload();             
  17.               alert(window.Test); 
  18.        } 
  19. function test() 
  20.        alert("模态窗口成功调用父窗口的方法"); 

2.模态窗口操作父窗口

  1. var parentWin=window.dialogArguments;  

刷新:

  1. parentWin.location.reload();  

取值:

  1. alert(parentWin.document.getElementById("ShowModalDialogDiv").innerHTML)   //获取父窗口中的对象 
  2.  alert("我是从父窗口中得到的变量>>>"+parentWin.parValue);       //获取父窗口中的变量 

调用父窗口JS方法:

  1. parentWin.test();    //调用父窗口中的方法 

赋值:

  1. parentWin.document.getElementById("ShowModalDialogDiv").innerHTML="我是从子窗口ShowModalDialog传过来的值";  

关闭本窗口:

  1. //关闭本窗口 
  2. function CloseWindow() 
  3.        window.parent.close(); 

关闭父窗口:

  1. //关闭父窗口 
  2. function CloseModal() 
  3. {     
  4.        var IsIE = (navigator.appName == 'Microsoft Internet Explorer'
  5.               if(IsIE){//如果是IE             
  6.                      window.parent.parent.close(); 
  7.                      //parentWin.opener=null;如果把上面的换成这行,不能关闭父窗口, 
  8.                      parentWin.close(); 
  9.                      //window.parent.parent.parent.parent.close();这个只能关闭模态窗口本身目前只在IE6下测试 
  10.               }else
  11.                      alert("火狐不能直接关闭;需要以下设置1.开firefox,在地址栏输入about:config;2.找到dom.allow_scripts_to_close_windows这项并改为true"); 
  12.               }     

更多模板/案例展示

亚太盛典国际婚纱摄影 本案例由亚太盛典国际婚纱公司所部署,精美的界面,合理的布局是网站的一大特色!
亚太盛典国际婚纱摄影 本案例由亚太盛典国际婚纱公司所部署,精美的界面,合理的布局是网站的一大特色!
关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作