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

Question

我正在使用 Visual Studio 2015 RC 和 jQuery Mobile（multipage app) (jQuery 2.1.4, jQuery Mobile 1.4.5), and I'm experiencing behavior with the back-button contrary to my understanding of how it should work. Right now, all my testing and development is being done on/for Windows Phone 8.1. The only plugins I'm using are cordova-plugin-media, which has a dependency on cordova-plugin-file 构建一个 Cordova 5.0.0 应用程序，尽管我没有明确使用文件插件。

问题

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

所以，我尝试用自己的实现覆盖后退按钮，但我无法触发 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 的错误版本。我不确定如何纠正这个问题，也不确定这是否是我的问题。我打开了一个，但想在这里提及它以防相关。我正在指定 5.0.0，但是当我在调试时查看动态内容时，它看起来像是使用 3.9.0-dev

编辑

经过进一步研究，版本号似乎是正确的。参见：

Answer 1

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

function deviceReady() {

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

}

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

navigator.app.exitApp();

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

我遇到了完全相同的问题，我在 Whosebug 中找到了另一个问题和答案。你可以在这里查看 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 4

当我将 cordova 从 3.6.6 升级到 5.1.1 版本时，我也遇到了同样的问题。升级 cordova 后退按钮未触发。最后我在 cordova.js 中做了下面的更改，之后它工作正常：

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

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

Cordova 5.0 Back Button Exits jQuery Mobile App

jquery-mobile

cordova

hybrid-mobile-app

windows-phone-8.1

visual-studio-2015