Windows 8.1应用程序中的后退按钮问题(PhoneGap)

时间:2016-03-22 10:06:32

标签: cordova windows-phone-8.1

我正在 PhoneGap (HTML5和Javascript)中为 Windows Phone 8.1 开发单页应用。 Everthing工作正常但唯一的问题是处理我的应用程序的后退按钮

以下是我的应用的代码结构(单页应用):

<body>

<div class="Page1">
    // Here is the code of First page of my app (Login Wizard.)
</div>

<div class="Page2">
    // Here is the code of Second page of my app
</div>

<div class="Page3">
    // Here is the code of Third page of my app
</div>

<div class="Page4">
    // Here is the code of Fourth page of my app
</div>

<div class="Page15">
    // Here is the code of Fifth page of my app
</div>

<div class="Page6">
    // Here is the code of Sixth page of my app
</div>

//And so on

</body>

enter image description here

我尝试使用几种方法来处理它,但没有任何效果。其中两个是:

首先

  $(document).ready(function () { 
        document.addEventListener("deviceready", setOverrideBackbutton, false);
    });

function setOverrideBackbutton() {
    document.addEventListener("backbutton", backButtonTap, true);
}

/**
 * Callback after a backbutton tap on windows platforms.
 * Do nothing.
 */
function backButtonTap() {
    //Do not remove
    alert("back button clicked.");
}

第二

link: function(scope, element, attrs) {
     element.on('click', function() {
         $window.history.back();
     });
 }

但我无法这样做。我猜它是因为我的应用程序是单页应用程序。我该怎么办。

提前致谢。

1 个答案:

答案 0 :(得分:3)

注册事件onBackKeyDown();

的方法
   if (device.platform == "windows") {
    // Get the back button working in WP8.1
    WinJS.Application.onbackclick = function () {
        onBackKeyDown();
        return true; // This line is important, without it the app closes.
    }
}
else {
    document.addEventListener("backbutton", onBackKeyDown, false);
}

现在只需添加一个函数来处理onBackKeyDown事件即可:

function onBackKeyDown() {
    // Back key pressed, do something here
}

挂钩到BackButton-Event的标准方法如下所示:

<!DOCTYPE html>
<html>
  <head>
    <title>Cordova Back Button Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Call onDeviceReady when Cordova is loaded.
    //
    // At this point, the document has loaded but cordova-2.5.0.js has not.
    // When Cordova is loaded and talking with the native device,
    // it will call the event `deviceready`.
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Cordova is loaded and it is now safe to call Cordova methods
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown() {
    }

    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>