Question

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

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

有没有办法调用一个在页面重新加载时显示弹出窗口的函数？

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

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

Answer 1

如果您必须重新加载现有页面（而不是切换到ajax调用等），则无法在页面中执行“重新加载”消息。您可以做的是打开一个名为

的子窗口

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

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

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

这看起来很奇怪，但是使用window.open网址调用""并且与您的网页来源有权访问的打开窗口同名，会返回对现有窗口的引用，你可以关闭。

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

这是一个完整的，有效的示例（在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>

Answer 2

取决于页面重新加载后的更改，但是如果您正在显示＆＃34;正在加载＆＃34;消息，你应该在此期间加载一些东西。

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

加载结果，页面的一部分或整个新页面，并替换成功回调中替换的任何需求。

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

2 个答案: