夏日博客

A-A+

js子窗口刷新父窗口及父窗口与子窗口的交互

2016年01月21日 前端设计 评论 1 条 阅读 7 views 次

本文章介绍了关于javascript中子窗口刷新父窗口及父窗口与子窗口的交互各种方法,有需要的朋友可参考一下.

浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法.

Js代码如下:

  1. <script language=JavaScript>      
  2.    parent.location.reload();      
  3. </script>  

弹出子页面,Js代码如下:

  1. <script language=JavaScript>      
  2.    window.opener.location.reload();      
  3. </script>  

子窗口刷新父窗口,Js代码如下:

  1. <script language=JavaScript>      
  2.    self.opener.location.reload();      
  3. </script>    

实例,需要在新打开的窗口里面编辑信息,等编辑完了,需要将当前窗口关闭并且刷新父窗口,以使修改生效,本文就是介绍用 javascript 来实现"更新记录后关闭子窗口并刷新父窗口".

刷新父窗口并关闭当前窗口

父窗口代码:

  1. <a href="javascript:void(0)" onclick="window.open('child.html','child','width=400,height=300,left=200,top=200');">打开子窗口</a>  

子窗口代码如下:

  1. <script language="JavaScript" type="text/javascript">   
  2. <!--   
  3. function refreshParent() {       
  4. windowwindow.opener.location.href = window.opener.location.href;       
  5. if (window.opener.progressWindow)       
  6. {           
  7. window.opener.progressWindow.close();       
  8. }       
  9. window.close(); }   
  10. //-->  
  11. </script>     
  12. <a href="javascript:void(0)" onclick="refreshParent()">刷新父窗口并关闭当前窗口</a>  

刷新以open()方法打开的窗口

Js代码如下:

  1. <script language=JavaScript>      
  2.      window.opener.location.href=window.opener.location.href;      
  3. </script>  

刷新以winodw.showModelDialog()方法打开的窗口

Java代码如下:

  1. <script language="javascript">      
  2.    window.parent.dialogArguments.document.execCommand('Refresh');      
  3. </script>  

总结了上面的一些方法我们来做个实例,Javascript 中父窗口与子窗口的交互,我们需要在父窗口和子窗口中进行交互，比如在子窗口中上传完文件，将上传的结果返回到父窗口中。本文介绍的就是一个简单的交互实例。如果你的头脑够灵活,代码如下:

  1. <script type="text/javascript">   
  2. <!--   
  3. function openWindow()   
  4. {   
  5.     newWindow = window.open('','newWindow','height=300,width=300,scrollbars=auto');    
  6.     if (newWindow != null)   
  7.     {   
  8.        var windowHTML= "<html><head><title>preview</title></head>";   
  9.        windowHTML += "<body><h1 align='center'>";   
  10.        windowHTML += "这是子窗口!</h1><hr><div align='center'><form action='#' method='get'>";   
  11.        windowHTML += "<input type='button' value='将父窗口的背景设为红色' onclick='window.opener.document.body.style.backgroundColor="red";' /><br>";   
  12.        windowHTML += "<br ><input type='button' value='关闭' onclick='self.close();' />";   
  13.        windowHTML += "</form></div></body></html>";   
  14.     
  15.        newWindow.document.write(windowHTML);   
  16.        newWindow.focus();   
  17.     }   
  18. }   
  19. //-->   
  20. </script>  
  21. <input value='打开子窗口' onclick="openWindow();" type="button">   
  22. <input type="button" value="将子窗口的背景设为蓝色" onclick="if (window.newWindow){newWindow.document.bgColor='blue';newWindow.focus();}" />  
标签：

1 条留言  访客：1 条  博主：0 条

  1. 途牛博客 2016年01月21日 下午 8:40  -199楼  回复

    走一个！也学习一下

给我留言