JSP 頁面跳轉前執行 JavaScript：onbeforeunload 與 onunload 事件應用

需求

在 JSP 頁面中，只要瀏覽器地址欄變化 (跳轉、關閉、重新整理)，在離開前執行特定 JS 方法 (如儲存草稿、發送統計、確認提示)。

核心事件

實作範例

<script>
// 1. 離開確認 (彈出瀏覽器原生確認框)
window.onbeforeunload = function(e) {
    // 標準寫法：設定 returnValue 觸發確認框
    var msg = '確定要離開嗎？未儲存的資料將會遺失。';
    (e || window.event).returnValue = msg; // IE/Chrome/Firefox
    return msg; // 部分舊版瀏覽器需要 return
};

// 2. 執行具體邏輯 (不可阻止，不可彈窗 alert)
window.onunload = function() {
    // 僅支援同步、非阻塞操作
    // 1. navigator.sendBeacon (推薦：可靠、非阻塞、支援跨域)
    navigator.sendBeacon('/api/log/pageview', JSON.stringify({ 
        url: location.href, 
        time: Date.now(),
        action: 'unload'
    }));
    
    // 2. 同步 AJAX (不推薦：可能被瀏覽器取消、阻塞卸載)
    // var xhr = new XMLHttpRequest();
    // xhr.open('POST', '/api/log', false); // false = 同步
    // xhr.send('data');
    
    // 3. localStorage/sessionStorage 寫入 (同步、即時)
    sessionStorage.setItem('lastVisit', Date.now());
    
    // 注意：這裡不能用 alert()、confirm()、異步 fetch/XHR (可能失敗)
};
</script>

關鍵限制與最佳實踐

• `onbeforeunload` 返回字串：現代瀏覽器**忽略自訂字串**，統一顯示瀏覽器預設文案 (如「離開網站？您的變更可能不會被儲存。」)。僅能控制**是否顯示確認框** (返回值非空/設定 returnValue)。
• `onunload` 禁用 `alert`/`confirm`/`prompt`**：瀏覽器會忽略或阻塞。**嚴禁使用**。
• 異步請求不可靠：`fetch`、`XMLHttpRequest` (async) 在 `unload` 可能被瀏覽器取消。**必須用 `navigator.sendBeacon()`** (專為此場景設計) 或**同步 XHR** (會延遲卸載，慎用)。
• 行動裝置行為不同**：iOS Safari 可能不觸發 `onbeforeunload` (直接關閉分頁)；Android Chrome 行為較標準。不可依賴此事件執行關鍵業務邏輯。
• bfcache (Back/Forward Cache)**：瀏覽器緩存頁面狀態，`onunload` 不觸發，改觸發 `onpagehide` (persisted=true)。關鍵邏輯請同時監聽 `pagehide`。

完整生命週期監聽模板

function handleUnload() {
    navigator.sendBeacon('/api/heartbeat', 'unload');
}

window.addEventListener('beforeunload', (e) => {
    if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = '';
    }
});

window.addEventListener('unload', handleUnload);
window.addEventListener('pagehide', (e) => {
    if (e.persisted) {
        // 頁面進入 bfcache，視同 unload
        handleUnload();
    }
});

結論

JSP 頁面跳轉前執行 JS：**用 `beforeunload` 彈確認框阻止誤離開，用 `unload`/`pagehide` + `navigator.sendBeacon()` 可靠發送統計/日誌**。嚴禁在 `unload` 使用 `alert`/異步請求。關鍵業務邏輯 (如儲存草稿) 應採用**定時自動儲存** 或 **`beforeunload` 同步 XHR** (謹慎)，不可完全依賴卸載事件。