如何在單頁應用程序的某些頁面中禁用后退按鈕

Question

我的應用程序具有在列表視圖中顯示詳細信息的頁面。 單擊列表項后，它將向下鑽取至顯示其各自詳細信息的頁面。

我需要使用移動設備或瀏覽器中的默認后退按鈕從詳細信息頁面導航到列表頁面，但是當我在列表視圖頁面中單擊它時，相同的后退按鈕不起作用。

我厭倦了通過在該列表頁面的JS中添加以下代碼來防止后退按鈕的默認操作。 但是，整個應用程序都禁用了后退按鈕。

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown(e) {
  e.preventDefault();
  // alert('Back Button is Pressed!');
}

誰能幫我解決這個問題。 提前致謝

Answer 1

要處理后退按鈕行為（模擬禁用），您必須處理導航和一個變量，以知道何時允許導航。

我做了一個頁面來展示如何與瀏覽器的后退按鈕和Android后退按鈕一起使用。

變量disableBackButtonInThisPage最初為true，因此不允許導航。

“切換禁用”按鈕更改disableBackButtonInThisPage值，因此，如果為false，則允許導航。

<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        history.pushState(null, null, location.href);
        var disableBackButtonInThisPage = true;
        window.onpopstate = function () {
            if (disableBackButtonInThisPage) {
                history.go(1);
            }else{
                history.go(-1);
            }
        };
        function toggleDisable() {
            disableBackButtonInThisPage = !disableBackButtonInThisPage;
            alert("Disable back button is: " + disableBackButtonInThisPage);
        }
    </script>
</head>

<body>
    <h1>Back button demo</h1>
    <p>Click browser back button or tap Android back button.</p>
    <button onclick="toggleDisable();">Toggle disable</button>
</body>

</html>

Answer 2

您必須使用某個變量來管理您所在的部分，並在每次更改時對其進行更新，在這種情況下，我將使用“ pagenow”

<button data-bind="enable: pagenow()!='listpage'">Back</button>

如何在單頁應用程序的某些頁面中禁用后退按鈕

問題描述

2 個解決方案

解決方案1
1 2019-02-06 02:36:34

解決方案2
0 2018-09-24 15:20:10

如何在單頁應用程序的某些頁面中禁用后退按鈕

問題描述

2 個解決方案

解決方案1 1 2019-02-06 02:36:34

解決方案2 0 2018-09-24 15:20:10

解決方案1
1 2019-02-06 02:36:34

解決方案2
0 2018-09-24 15:20:10