如何在单页应用程序的某些页面中禁用后退按钮

Question

My Application has page that displays the details in a list view. 我的应用程序具有在列表视图中显示详细信息的页面。 On clicking on the list item it will drill down to the page which shows its respective details. 单击列表项后，它将向下钻取至显示其各自详细信息的页面。

I need to navigate from the details page to the list page using the default back button in mobile or browser, but the same back button should not work when I click on it in the list view page. 我需要使用移动设备或浏览器中的默认后退按钮从详细信息页面导航到列表页面，但是当我在列表视图页面中单击它时，相同的后退按钮不起作用。

I tired to prevent the default action of the back button by adding the below code in the JS of that list page. 我厌倦了通过在该列表页面的JS中添加以下代码来防止后退按钮的默认操作。 However the back button is disabled for the whole application. 但是，整个应用程序都禁用了后退按钮。

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

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

Could anyone help me to solve this issue. 谁能帮我解决这个问题。 Thanks in Advance 提前致谢

Answer 1

To handle the back button behavior (simulating disable) you have to handle the navigation and a variable to know when navigation is permitted. 要处理后退按钮行为（模拟禁用），您必须处理导航和一个变量，以知道何时允许导航。

I made a page to show how, it works with browsers back button and Android back button. 我做了一个页面来展示如何与浏览器的后退按钮和Android后退按钮一起使用。

The variable disableBackButtonInThisPage is initially true, so navigation is not permitted. 变量disableBackButtonInThisPage最初为true，因此不允许导航。

A "Toggle disable" button changes the disableBackButtonInThisPage value, so when it is false, navigation is permitted. “切换禁用”按钮更改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