如何對來自onbeforeunload的子事件做出反應？

我注意到事件onbeforeunload能夠區分不同的用戶動作，例如，用戶是否按下頁面上的鏈接，用戶試圖關閉頁面，用戶想要返回一頁等等。如何對來自onbeforeunload的子事件做出反應？

例如，如果用戶點擊鏈接，則用文本確認框「您確定要關閉頁面？」提示，但如果用戶按F5來刷新頁面，那麼框的文本是「您確定要刷新頁面？」。

是否有可能從onbeforeunload中區分不同的子事件並對其作出反應？

我嘗試將用戶嘗試離開頁面時頁面的背景顏色更改爲紅色，如果嘗試刷新頁面，則更改爲橙色，這只是簡單的測試操作以便更好地理解。

備註：我將提示中的文本從德文翻譯爲英文，所以文本可能不同。

SIDE問題：爲什麼如果我的鏈接，然後按「離開頁」如果我在我的本地網絡服務器運行這段代碼，但如果我計算器上運行它點擊出現兩次確認框？

function ask() 
 
{ 
 
    return "Are you sure?"; 
 
    
 
    //How can i find out what the user actually tried? 
 
    //e.g. did he tried to refresh the page? Or did he tried to close it? 
 
    //PSEUDO CODE: 
 
    // if (user_tried_reload) { alert("RELOAD"); } 
 
    // else if (user_tried_close) { alert ("CLOSE"); } 
 
}

<body onbeforeunload="return ask()"> 
 
    <h1>onbeforeunload Test</h1> 
 
    <a href="http://www.google.de">Google</a> 
 
</body>

用法：按「運行的代碼片斷」，然後點擊是否鏈接或嘗試刷新頁面。

來源

2016-04-08 Black

代碼觸發兩次的原因是因爲「離開頁面」按鈕會重新觸發卸載事件。

我建議你做的是趕上F5按鍵事件，做自己的消息：

document.onkeydown = function(evt) { 
    evt = evt || window.event; 
    if (evt.keyCode == 116) { 
     ask('reload'); 
    } 
};

在你問（）函數，我想這樣是這樣的：

var howmanytimes = 0; 
function ask(action) 
{ 
    howmanytimes++; 

    //PSEUDO CODE: 
    if (howmanytimes == 1) { 
    if (action == 'reload') { alert("RELOAD"); } 
    else { alert ("CLOSE"); } 
    } else { howmanytimes == 0 }; 
}

此代碼未經測試，我無法從我的位置訪問jsfiddle，希望這可以指向正確的方向（並且我首先正確理解了該問題！）

來源

2016-04-08 08:11:42 zerohero

頁面可以通過單擊刷新Ť他在瀏覽器中刷新圖標，ctrl + r，F5 –

Thx。但是，如果用戶按下瀏覽器上的重新加載按鈕，那麼它仍然被認爲是CLOSE – Black

如果你抓住F5（並記住Ctrl + R），檢查event.ClientY是<0（關閉按鈕被點擊）那麼你會知道刷新被點擊。說得通？ – zerohero

如何對來自onbeforeunload的子事件做出反應？

回答

相關問題