jQuery 在javascript中关闭弹出窗口后如何刷新父页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19027959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to refresh parent page after closing popup window in javascript?
提问by Developer Desk
I have one page list.jsphaving list of all records in table and one button at top to add new record.
我有一页包含list.jsp表中所有记录的列表，顶部有一个按钮来添加新记录。
I want to open add.jspas a popup window. This works but when I close popup window how to update list.jspso that it shows newly added record
我想add.jsp作为弹出窗口打开。这有效，但是当我关闭弹出窗口时如何更新 list.jsp以显示新添加的记录
Here is my code what i tried...
这是我尝试过的代码...
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>
列表.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>添加.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>
回答by vladzam
You could use location.reload(true)to reload the current document. The forceGetparameter is by default falseand that is why you pass it in as trueto overwrite it. Basically it is used to fetch the document from the server, instead of loading it from the cache.
您可以使用location.reload(true)重新加载当前文档。该forceGet参数是默认值false，这就是为什么您将其传递为true覆盖它的原因。基本上它用于从服务器获取文档，而不是从缓存中加载它。
EDIT1: If you are trying to reload the source window of the popup, as escaparello mentioned in the comments, you should call window.opener.location.reload(). Also, you could bind an event listener for when the popup unloads, as follows:
EDIT1：如果您尝试重新加载弹出窗口的源窗口，如评论中提到的 escaparello，您应该调用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();
}
回答by Secret Squirrel
As from my comment from the other answer you just need to handle the window.onunloadevent and use the window.openerproperty to tell the calling page to be refreshed.
根据我对其他答案的评论，您只需要处理window.onunload事件并使用该window.opener属性告诉调用页面刷新。
2.add.jsp
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>
