2016-12-04 195 views
0

显示正确的消息,我有一个的onclick功能,我这样调用,然后重新加载该页面:呼叫功能,在Javascript

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

有没有什么办法来调用一个函数,它会在页面重新加载时显示弹出窗口?

这里的诀窍是页面重新加载可能需要长达30-50秒,所以我得向最终用户显示一些东西。

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

+0

你要弹出的页面重新加载时? – Mahi

+0

警报或某种其他类型的弹出消息只是为了让用户知道某些事情正在发生 – User987

+0

您正在导致页面重新加载,从而丢弃正在运行的代码。一种选择是保留控件并用Ajax调用重新加载页面,然后用返回的HTML替换页面。由于你的代码仍然以这种方式运行,你可以在加载过程中做任何你喜欢的事情。 –

回答

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"" URL和同一个名字作为一个开放的窗口,你的页面起源有获得回报提及现有的窗口,您可以关闭该窗口。

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

下面是一个完整,工作示例(不正确的的jsfiddle或堆栈片段工作,以各种方式被那些沙盒环境):

<!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> 
0

取决于页面重新加载后发生了什么变化,但是如果您显示“正在加载”消息,则应该在此期间加载某些内容。

为此目的使用了Ajax(当您使用jQuery): http://api.jquery.com/jquery.ajax/

负荷的结果,页面或一个全新的页面的一部分,并取代任何需要更换的成功回调。