如何使用 Javascript 中的 Ajax 让 Android phone 的后退按钮起作用？

Question

我有以下代码来处理 Javascript 中来自 Framework 7 的设备的后退按钮。我想知道是否所有后续页面都使用 Ajax，如何使用后退按钮返回到我之前的页面。目前，按下返回按钮，总是提示用户是否要退出应用程序。该应用程序有 20 个页面，但它们都显示为 Ajax 页，而不是 HTML 页。

<!-- We don't need full layout here, because this page will be parsed with Ajax-->

请帮忙。感谢您的帮助！

        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        // device APIs are available
        function onDeviceReady() {
            // Register the event listener
            document.addEventListener("backbutton", onBackKeyDown, false);
            document.addEventListener("menubutton", onMenuKeyDown, false);
        }
        // Handle the back button
        function onBackKeyDown(e) {
            e.preventDefault();
            navigator.notification.confirm("Are you sure you want to exit?", onConfirm, "Confirmation", "Yes,No");
            //navigator.app.backHistory();

            if (document.getElementById('#homepage')) {
                e.preventDefault();
                navigator.app.exitApp();
                navigator.notification.confirm("Are you sure you want to exit?", onConfirm, "Confirmation", "Yes,No");
            } else {
                navigator.app.backHistory();//This line doesn't work when tried on the if function - it seems useless - maybe not supported anymore?
                //the code never gets here coz other pages are simply loaded as Ajax, and there is only 1 index.html - how to fix?
            }
        }

        function onConfirm(button) {
            if (button == 2) { //If the user selected No, then we just do nothing
                return;
            } else {
                navigator.app.exitApp(); // Otherwise we quit the app.
            }
        }
        // Handle the menu button
        function onMenuKeyDown() {}

Answer 1

我认为这里的问题是页面在 DOM 中，但没有显示。

if (document.getElementById('#homepage')) {

当您在另一个页面时，您可以检查此 HTML 元素是否具有 class 或特定样式。

如果您使用 ajax，我想这个 HTML 元素将具有 hidden class 或 display: none 样式，所以我希望其中之一对您有用：

document.querySelectorAll('#content[style="display: none;"]') document.querySelectorAll('#content.hidden')

Answer 2

在 Framework 7 应用程序中，您可以使用 mainView.router.back() 处理后退按钮以返回到您之前的页面。

function onBackKeyDown(e) {

    if(mainView.activePage.name == 'yourhomepagename') {
        e.preventDefault(); 
        navigator.notification.confirm("Are you sure you want to exit?", onConfirm, "Confirmation", "Yes,No");
    } else {
        mainView.router.back({ ignoreCache: true });
    }

}

如何使用 Javascript 中的 Ajax 让 Android phone 的后退按钮起作用？

How to make Android phone's back button work using Ajax in Javascript?

javascript

jquery

cordova

back

phonegap