有沒有辦法阻止用瀏覽器後退按鈕離開網頁？

1）我試圖找到一種方法來顯示一個確認彈出窗口，通過瀏覽器後退按鈕離開頁面。卸載事件在這種情況下似乎不會觸發。我正在使用angular2。我曾嘗試訂閱所有導航事件：有沒有辦法阻止用瀏覽器後退按鈕離開網頁？

this.router.events.pairwise().subscribe((e) => { 
    if (e[0] instanceof NavigationEnd && e[1] instanceof NavigationStart) { 
    console.log(e[0].id + " " + e[0].url + ", " + e[1].id + " " + e[1].url); 
    if (!this.whateverService.canNavigateAway) { 
     //var b = confirm("You have unsaved changes. Navigate away?"); 
    } 
    } 
});

但我似乎無法取消導航。

2）如果無法使用後退按鈕取消導航，則會出現其他問題。我如何區分前進和後退，還是返回3頁？那麼知道瀏覽本地瀏覽器歷史記錄的頁面的位置是很好的。我想知道，例如歷史記錄總共有7頁，我們從索引5的頁面導航到索引4的頁面。這樣我就可以導航回到我想要的位置而不會弄亂歷史。

來源

2016-11-16 Zsolt Z.

你可以看看歷史api。 https://developer.mozilla.org/en-US/docs/Web/API/History_API您可以使用pushState來放置一個僞造的URL條目。你也可以用僞造的#anchor標籤來做到這一點，在頁面加載時可能會觸發虛假的點擊。 – Keith

你可以查看歷史API，當然，但請注意，歷史API不會做什麼*你要;它希望*你*做它想要的東西。這很奇怪和具有挑戰性。 – Pointy

據我所知，儘管使用@keith建議使用虛假網址，但您無法控制它們。導航按鈕存在於我們的總體控制範圍之外，因爲它們是瀏覽器本身的一部分，而不是網頁，因此它們不能根據我們的請求明確停止。這些都是內置於瀏覽器中的內容，不應該混淆，因爲您不希望導致不可預知的行爲。圍繞這個事實開發你的應用程序是比較聰明的，而不是試圖去對付它。

此外，對於所有這一切，你不希望侵入瀏覽器。一旦你開始處理你沒有明確創造或者被允許訪問的東西，你就會穿過一條線進入假設之地，這是我學習的一個非常危險的地方。

如果您試圖保持一個有狀態的系統，那麼可以在用戶到用戶的基礎上對後端進行管理，這樣做根本沒有侵入性，並且可以提供令人愉快的用戶體驗，而不會阻礙正常的瀏覽器操作，

來源

2016-11-16 15:58:02 Turk

謝謝你的回答，我會盡力說服我的團隊。 –

如果它足夠讓你可以做到這一點之前，表現出非定製警報/提示：

window.onbeforeunload = function() { 
    return 'Something that is not undefined'; 
}

測試在Chrome中，似乎你不能設置顯示的警報文本。

編輯：我沒有張貼的來源，因爲它似乎並沒有因爲他們所描述的工作，但這裏是MDN documentation和StackOverflow answer。

來源

2016-11-16 16:05:17 ArneHugo

如果他使用這個，他將不得不在每次刷新或提交或頁面更改時處理它。 –

此警報僅在離開域時才顯示（網址中第一個斜槓之前的任何內容都會更改）。也許這不是要求的？ – ArneHugo

嗨，我需要它顯示每次用戶按下後退按鈕。即使他們從/ myapp/form1導航到/ myapp/form2。 –

有沒有辦法阻止用瀏覽器後退按鈕離開網頁？

回答

相關問題