如何在JavaScript中关闭弹出窗口后刷新父页面？

Question

如何在JavaScript中关闭弹出窗口后刷新父页面？

javascriptjqueryjsppopupwindow

4

我有一个页面 list.jsp，其中包含表中所有记录的列表和一个在顶部添加新记录的按钮。

我想将add.jsp作为弹出窗口打开。这样做是可以的，但是当我关闭弹出窗口后，如何更新list.jsp以显示新添加的记录呢？

这是我尝试过的代码...

list.jsp

<html>
<head>
<script>
   function popupwindow(url, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
    popupWindow =  window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
     return popupWindow
   } 
</script>
</head>
<body>
<input type="button" value="Add new" id="add-btn" onclick="popupwindow('Addnew.jsp','Add new',600,400)"/>  
<table>   
  // Here i am showing all records from database...
</table>
</body>

add.jsp

     <html>
     <head>
     <script type="text/javascript">
     $(document).ready(function(){

        $("#savebtn").click(function(e) {
        $.ajax({
                    type: "POST",
                    url: "RecordHandler",
                    data: dataString,
                    success: function(data){ 
                        $('body').html(data);
                        $('#msg').html('New Record Added Successfully.')
                    }
                }); 
       });

      </head>
      <body>
      <form method="POST">
      <table>              
      <tr>
       <td>Folder Number</td>
       <td><input type="text" name="folderno"/></td>
     </tr>
     <tr>
        <td>Box Number <b style="color:red">*</b></td>
       <td><input type="text" name="boxno"/></td>
    </tr>
    <tr>
     <td colspan=2>
      <input type="submit" value="Save" name="save" id="savebtn"/>
    </td>
  </tr>
   </table> 
 </form>

- Developer Desk

请查看此答案：https://dev59.com/nmgv5IYBdhLWcg3wMNwU - Squirrel5853

2个回答

6

根据我在其他答案中的评论，您只需要处理window.onunload事件并使用window.opener属性告诉调用页面进行刷新。

2.add.jsp

<html>
<head>
    <script type="text/javascript">

        //ADDED START
        window.onunload = refreshParent;
        function refreshParent() {
            window.opener.location.reload();
        }
        //ADDED END

        $(document).ready(function(){
            $("#savebtn").click(function(e) {
                $.ajax({
                    type: "POST",
                    url: "RecordHandler",
                    data: dataString,
                    success: function(data){ 
                         $('body').html(data);
                         $('#msg').html('New Record Added Successfully.');
                         window.timeout(CloseMe, 1000); <-- not sure on the syntax 
                         but have a timeout which triggers an event 
                        to close the form once a success has been handled. 
                        Probably should do something incase of an error.
                    }
                });

                return false; <-- this should stop the window from unloading. 
            });

         function CloseMe()
         {
             window.opener.location.reload();
             window.close();
         }
   </head>

- Squirrel5853

但它没有显示“新记录已成功添加”的消息...用户怎么知道记录已成功添加？ - Developer Desk

在你为 savebtn 声明的 click function 中，你可以使用 return false。然后再有另一个 function 在 success 中被触发，用于关闭表单。这样，在关闭之前它会等待成功。 - Squirrel5853

我已更新答案，试图演示我上面所描述的内容。 - Squirrel5853

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vladzam · Accepted Answer

你可以使用location.reload(true)来重新加载当前文档。默认情况下，forceGet参数为false，因此你需要传递true来覆盖它。基本上，它用于从服务器获取文档，而不是从缓存中加载。

编辑1：如果你正在尝试重新加载弹出窗口的源窗口，如评论中提到的那样，请调用window.opener.location.reload()。此外，你还可以绑定一个事件监听器以在弹出窗口卸载时执行操作，如下所示：

popupWindow.onunload = function () {
    // This informs the user that the record has been added successfully
    alert('The record has been inserted into the database!');

    window.opener.location.reload();
}