与 location.reload 同时调用函数以在 Javascript 中显示正确的消息

Question

我有一个 onclick 函数，我这样调用它然后重新加载页面：

$(document).on("click", "#btnAuthorize", function () {
        location.reload();
        $('#messageLoading').show();
    });

有什么方法可以调用在页面重新加载时显示弹出窗口的函数吗？

这里的技巧是页面重新加载可能需要 30-50 秒，所以我必须向最终用户显示一些内容。

有人可以帮我解决这个问题吗？

Answer 1

取决于页面重新加载后发生的变化，但如果您显示 "loading" 消息，则您应该同时加载一些内容。

为此目的，请使用 ajax（因为您正在使用 jquery）： http://api.jquery.com/jquery.ajax/

加载结果、页面的一部分或整个新页面，并在成功回调时替换任何需要替换的内容。

Answer 2

如果您必须从字面上重新加载现有页面（而不是切换到 ajax 调用等），则无法执行 "reloading" 消息 in-page。您可以做的是打开一个child window，名称为：

var wnd = window.open("reloading.html", "reloading", "width=400,height=400,toolbar=no);
sessionStorage.setItem("reloading", "Yes");

注意会话存储标志，以便我们知道我们是否已经这样做了。然后在您要重新加载的页面的启动代码中，关闭 window:

if (sessionStorage.getItem("reloading")) {
    sessionStorage.removeItem("reloading");
    var wnd = window.open("", "reloading");
    if (wnd) {
        wnd.close();
    }
}

这看起来很奇怪，但是使用 "" URL 调用 window.open 并且与打开的 window 同名，您的页面来源可以访问 returns 对现有 window 的引用，您可以将其关闭。

标志很重要，否则 window.open 会尝试打开 new window，这几乎肯定会触发浏览器中的弹出窗口阻止程序.

这是一个完整的工作示例（在 jsFiddle 或 Stack Snippet 中无法正常工作，它们在各种方面都是沙盒环境）：

<!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 中显示正确的消息

Call function simultaneously with location.reload to display a proper message in Javascript

javascript

jquery

popup

reload