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

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