Javascript 如何在单页应用程序的某些页面中禁用“后退”按钮_Javascript_Jquery_Html_Cordova_Knockout.js

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

javascript jquery html cordova knockout.js

Javascript 如何在单页应用程序的某些页面中禁用“后退”按钮,javascript,jquery,html,cordova,knockout.js,Javascript,Jquery,Html,Cordova,Knockout.js,我的应用程序有一个在列表视图中显示详细信息的页面。单击列表项后，它将深入到显示其各自详细信息的页面我需要使用mobile或browser中的默认后退按钮从详细信息页面导航到列表页面，但在列表视图页面中单击相同的后退按钮时，该按钮不应工作我试图通过在列表页面的JS中添加以下代码来阻止后退按钮的默认操作。但是，对于整个应用程序，“后退”按钮被禁用 document.addEventListener("backbutton", onBackKeyDown, false); function on

我的应用程序有一个在列表视图中显示详细信息的页面。单击列表项后，它将深入到显示其各自详细信息的页面

我需要使用mobile或browser中的默认后退按钮从详细信息页面导航到列表页面，但在列表视图页面中单击相同的后退按钮时，该按钮不应工作

我试图通过在列表页面的JS中添加以下代码来阻止后退按钮的默认操作。但是，对于整个应用程序，“后退”按钮被禁用

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

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

谁能帮我解决这个问题。提前感谢

您必须使用某些变量来管理您所在的部分，并在每次更改时更新它，在这种情况下，我使用“pagenow”来执行此操作

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

返回

要处理后退按钮行为（模拟禁用），您必须处理导航和一个变量，以了解何时允许导航

<!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>

我制作了一个页面来展示如何使用浏览器后退按钮和Android后退按钮

变量disableBackButtonInThisPage最初为true，因此不允许导航

<!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>

“Toggle disable”（切换禁用）按钮更改DisableBackButtonInSpage值，因此，如果该值为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>


pushState（null，null，location.href）；
var disableBackButtonInThisPage=true；
window.onpopstate=函数（）{
如果（禁用BackButtonInDisplay）{
历史。围棋（1）；
}否则{
历史。go（-1）；
}
};
函数toggleDisable（）{
disableBackButtonInThisPage=！disableBackButtonInThisPage；
警报（“禁用后退按钮为：”+禁用后退按钮显示）；
}
后退按钮演示
单击浏览器后退按钮或轻触Android后退按钮
切换禁用

您无法可靠地禁用“后退”按钮。如果您需要这样做，那么它会指向您的站点架构中的一个缺陷。您的

onBackKeyDown

方法是否可以检查当前URL，并且仅在与特定URL匹配时调用

preventDefault

？