2016-12-04 194 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/

負荷的結果,頁面或一個全新的頁面的一部分,並取代任何需要更換的成功回調。