我有一个来自index.ejs的弹出窗口，名为math.ejs。按“提交确定”按钮后，我希望关闭 math.ejs 弹出窗口并在 index.ejs 上显示计算值。但现在，当我按下提交按钮时，弹出窗口会转到 index.ejs 并在那里更新；它不关闭。它不会在正常的index.ejs浏览器页面上更新它。我必须刷新该页面才能更新。
这是我在代码中尝试过的:
<form class="" action="/index" method="post" name="mathform">
<p>Value: <%= myValue %></p>
<button class="btn btn-md" name="button" value="confirm" onclick="CloseAndRefresh();">Ok</button>
</form>
<script language="javascript">
function CloseAndRefresh() {
opener.location.reload(true);
setTimeout(function() {
window.close();
}, 3000);
}
</script>
我确信这会起作用，因为它告诉父窗口重新加载，我什至在弹出窗口关闭之前设置了一个计时器。感谢您的帮助!
最佳答案
这里有一些可以帮助您入门的内容。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form class="" action="/index" method="post" name="mathform" onsubmit="submitForm(event)">
<p>Value: <%= myValue %></p>
<button class="btn btn-md" name="button" value="confirm">Ok</button>
</form>
<script language="javascript">
function submitForm(e) {
e.preventDefault(); // Prevents the form from getting submitted and navigating to /index
$.post("/index",{
// add your post field values here
field1: "value1",
field2: "value2",
})
.done(function(data){ // ajax request completed successfully
CloseAndRefresh();
})
.fail(function(error) { // ajax request failed
// TODO: handle error accordingly
CloseAndRefresh();
});
}
function CloseAndRefresh() {
opener.location.reload(true);
// this timeout can be removed since the page refresh has already started at this point
setTimeout(function() {
window.close();
}, 3000);
}
</script>
使用 jQuery，Ajax 请求通常更容易。我在上面的代码中包含了该库，但理想情况下您应该将其添加到 <head> 中。在这里我使用$.post函数( documentation )
关于javascript - 提交表单并更新父页面后关闭 javascript 弹出窗口吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58245689/