如何等待，直到jQuery的動畫完成使用onbeforeunload事件？

它看起來像一個基本問題，但我根本解決不了這個問題。我正在使用動畫來平滑頁面之間的導航。 window.onbeforeunload事件看起來不錯，可以觸發動畫，但jquery在新線程上執行動畫。有什麼方法可以等到動畫完成？我嘗試使用delay()和setTimeout() jquery函數，但他們顯然沒有停止函數。當我在結尾處添加一個循環等待時，窗口不會刷新，因此動畫甚至不顯示。如何等待，直到jQuery的動畫完成使用onbeforeunload事件？

我的代碼（jsfiddle）：

window.onbeforeunload = function (e) { 
    $('#loader-sheet').fadeIn(500); 
}

來源

2013-11-01 Patartics Milán

我想'window.onbeforeunload'希望你返回一些東西，比如它可以顯示給用戶的字符串。 – putvande

是的，但我不想通知他們，只需在瀏覽器從當前頁面導航到另一頁面之前執行動畫即可。綁定事件鏈接點擊會很好，但是當您通過腳本重定向時，我需要導航前的事件。 –

我認爲你不能這樣做。除非你自己控制頁面之間的導航（不通過'href =「...」'） – putvande

您無法阻止頁面發生變化 - 您只能顯示一些文本作爲確認（例如「您有未保存的草稿，您確定要離開嗎？」）。

這是設計 - 試想一下，如果每個惱人的廣告彈出窗口都被允許阻止您通過輸入200秒的動畫來退出頁面。

但是，您仍然可以執行某些操作，具體取決於爲什麼頁面正在更改。舉例來說，如果他們點擊你的頁面上的鏈接（不使用後退/前進按鈕），那麼你可以重寫click處理程序爲每個環節，如：

$('a[href]').on('click', function() { 
    if (/* link would change page */) { 
     performPageTransition(this.getAttribute('href')); 
     return false; 
    } 
}); 

function performPageTransition(newUrl) { 
    $('#loaderSheet').fadeIn(500, function() { 
     // Animation complete - move to new URL 
     window.location = newUrl; 
    }); 
}

所以不是瞬間以下鏈接，您截取點擊事件，然後再自己手動移動頁面。

但是，我也會考慮是否可以通過AJAX加載新的頁面內容。

來源

2013-11-01 14:00:16 cloudfeet

動畫中的200 ms限制很有幫助。 –

什麼200毫秒的限制？我說了一些關於「200秒」（3分多鐘）的內容，以此來說明你爲什麼不允許你提出的要求 - 否則彈出窗口可能會有一段令人難以置信的長時間「退出動畫」，基本上使它們無法關閉。 – cloudfeet

我實際上建議的是，不要讓頁面更改點擊發生，攔截點擊事件，執行動畫，然後*模擬*動畫完成後的點擊動作（頁面更改）。 – cloudfeet

從MDN：

此事件時返回一個非空值，系統會提示用戶確認頁面卸載。在大多數瀏覽器中，事件的返回值顯示在此對話框中。

onBeforeUnload用於提示用戶，不執行操作（如AJAX，動畫或其他）

https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload

有沒有API來完成你正在尋找做什麼。如果用戶要離開，瀏覽器唯一允許你做的事情就是提示他們，詢問他們是否確定要離開。您無法阻止它們（或延遲它們，同時仍然保持對UI的控制權，或者使用JavaScript API的任何內容）從您的頁面導航離開。

來源

2013-11-01 13:46:31 Adam

謝謝！但是在導航之前是否還有其他事件要觸發？我可以用e.preventDefault（）做些什麼嗎？ //做動畫然後手動進行導航？ –

好吧，它看起來像一個安全問題。 –

這確實是一個安全問題 - 但如果頁面更改是由於點擊鏈接或類似的東西，那麼您可以攔截點擊。 – cloudfeet

如何等待，直到jQuery的動畫完成使用onbeforeunload事件？

回答

相關問題