与location.reload同时调用函数以在Javascript中显示正确的消息 [英] Call function simultaneously with location.reload to display a proper message in Javascript
问题描述
我有一个onclick函数，我会这样调用它，然后重新加载页面:
I have a onclick function which I call like this and then reload the page:
$(document).on("click", "#btnAuthorize", function () {
location.reload();
$('#messageLoading').show();
});
有什么方法可以调用在页面重新加载时显示弹出窗口的函数?
Is there any way to call a function which would display a pop-up while the page is reloading ?
这里的窍门是页面重新加载可能需要30到50秒，因此我必须向最终用户显示一些内容.
The trick here is that page reload might take up to 30-50 seconds so I gotta display something to the end user.
有人可以帮我吗?
推荐答案
如果必须从字面上重新加载现有页面(而不是切换到ajax调用等)，则无法在-页.您可以要做的是打开一个子窗口，其名称为:
If you have to literally reload the existing page (rather than switching to an ajax call, etc.), you can't do the "reloading" message in-page. What you can do is open a child window with a name:
var wnd = window.open("reloading.html", "reloading", "width=400,height=400,toolbar=no);
sessionStorage.setItem("reloading", "Yes");
请注意会话存储标志，以便我们知道是否已完成该操作.然后在您要重新加载的页面的启动代码中，关闭该窗口:
Note the session storage flag so we know whether we've done that. Then in the startup code for the page you're reloading, close that window:
if (sessionStorage.getItem("reloading")) {
sessionStorage.removeItem("reloading");
var wnd = window.open("", "reloading");
if (wnd) {
wnd.close();
}
}
这看起来很奇怪，但是使用"" URL并与您的页面来源可以访问的打开窗口相同的名称调用window.open时，会返回对 existing 窗口的引用，您可以关闭.
That looks strange, but calling window.open with a "" URL and the same name as an open window your page origin has access to returns a reference to the existing window, which you can close.
该标志很重要，因为否则，window.open会尝试打开一个 new 窗口，几乎可以肯定会触发浏览器中的弹出窗口阻止程序.
The flag is important because otherwise, the window.open tries to open a new window, which will almost certainly trigger the popup blocker in your browser.
这是一个完整的，有效的示例(在jsFiddle或Stack Snippet中无法正常工作，它们是采用各种方式的沙盒环境):
Here's a complete, working example (doesn't work correctly in a jsFiddle or Stack Snippet, those are sandboxed environments in various ways):
<!DOCTYPE HTML "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Reloading Window Example</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<input type="button" value="Reload">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
if (sessionStorage.getItem("reloading")) {
sessionStorage.removeItem("reloading");
var wnd = window.open("", "reloading", "height=400,width=400,toolbar=no");
if (wnd) {
wnd.close();
}
}
$("input").on("click", function() {
var wnd = window.open("", "reloading", "height=400,width=400,toolbar=no");
wnd.document.write("<!doctype html><head><title>Reloading</title></head><body>Reloading...</body></html>");
setTimeout(function() {
sessionStorage.setItem("reloading", "Yes");
location.reload();
}, 2000);
});
</script>
</body>
</html>
这篇关于与location.reload同时调用函数以在Javascript中显示正确的消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
