Cordova 5.0 后退按钮退出 jQuery 移动应用程序

Question

我正在使用 Visual Studio 2015 RC 和 jQuery Mobile (multipage app)（jQuery 2.1.4、jQuery Mobile 1.4.5）构建一个 Cordova 5.0.0 应用程序，并且我遇到了使用后退按钮的行为与我对它应该如何工作的理解相反。现在，我所有的测试和开发都在/针对 Windows Phone 8.1 进行。我使用的唯一插件是cordova-plugin-media，它依赖于cordova-plugin-file，尽管我没有明确使用文件插件。

问题

无论我在哪个页面上，如果我按下硬件后退按钮，应用程序只会进入后台（不会关闭，只是应用程序被导航离开）。从我读过的所有内容中，我了解到默认情况下后退按钮应该像页面导航一样工作。 （也就是说，如果从第 1 页转到第 2 页并按回，则转到第 1 页。

所以，我尝试用自己的实现覆盖后退按钮，但我无法触发 backbutton event。

这里有一些代码：

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        console.log("deviceReady");
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        console.log('assign back button');
        document.addEventListener('backbutton', function (e) {
            console.log("backbutton");
            window.history.back();
            return false;
        }, false);
    };

当我运行我的应用程序时，deviceReady 会进入控制台，assign back button 也是如此。当我导航到我的应用程序（不管是 1、2、3 还是 4 页）并单击后退按钮时，backbutton 不会进入控制台，应用程序只会移到后面。

如果我将事件侦听器更改为：

document.addEventListener('backbutton', onBackButton, false);

和

function onBackButton() {
    console.log("backButton");
    window.history.back();
    return false;
};

然后我得到相同的结果。

我的脚本标签位于 index.html 内 body 标签的底部，并按以下顺序排列：

<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/platformOverrides.js"></script> // Empty file

<script src="scripts/index.js"></script>
<script src="scripts/jqueryHelpers.js"></script>

这里有什么明显的地方我做错了吗？

platformOverrides.js 由 Visual Studio 模板提供，为空。 index.js 由模板提供，是上面发布的代码所在的位置。 jqueryHelpers.js 只是两个常量，像这样：

var APIROOT = "http://WEBAPI-ADDRESS.COM/";
var PCFGUID = "00000000-0000-0000-000E-000000000000"; // changed to Guid.Empty here for security reasons.

编辑

我注意到 Visual Studio 也在拉下不正确的 Cordova 版本。我不确定如何纠正这个问题，我不确定这是否是我的问题。我已经打开了new question for it，但想在这里提及它以防万一。我指定的是 5.0.0，但是当我在调试时查看动态内容时，它看起来像是在使用 3.9.0-dev

编辑

经过进一步研究，看起来版本号可能是正确的。见：https://stackoverflow.com/a/31430780/403404

Answer 1

我遇到了完全相同的问题，我在 Stackoverflow 中找到了另一个问题的答案。你可以在这里查看Phonegap +jquery mobile + windows phone: Back button issue

这里是解决问题的代码：

WinJS.Application.addEventListener("backclick", function (evt) {
if (!jQuery(".ui-page-active").attr("id") == "page-home")) {
    history.back();
    // Prevent the default behavior by returning true. evt.preventDefault doesn't cancel the external code.
    return true;
}
// Execute the default behavior.
return false;
};

PS：我稍微更改了代码以避免原始答案中已弃用的 jQuery.mobile.activePage。

希望对你有帮助

Answer 2

在 deviceReady 或 mobileinit 中试试这个：

   $(document).bind('keydown', function(event) {
      if (event.keyCode == 27) {
        // Prevent default (disable the back button behavior)
        event.preventDefault();

        $.mobile.back();
      }
    });

希望对你有帮助！

Answer 3

尝试使用'on' jQuery 函数。问题可能与浏览器与您的代码的兼容性有关。您应该检查 Windows Mobile 上的浏览​​器版本。请阅读this attachEvent article.

function deviceReady() {

$("#backbutton").on("click",function(){
        console.log("backbutton");
         window.history.back();
         return false;
    });

}

如果您需要它用于退出和终止应用程序：[Cordova.js

navigator.app.exitApp();

Answer 4

当我将 cordova 从 3.6.6 升级到 5.1.1 版本时，即使我也面临同样的问题。升级科尔多瓦后退按钮不触发。最后我做了下面cordova.js 的更改之后它工作正常：

//var APP_PLUGIN_NAME = Number(cordova.platformVersion.split('.')[0]) >= 4 ? 'CoreAndroid' : 'App';
var APP_PLUGIN_NAME = 'App';