Question

我有一个小型的Phonegap应用，它有2个HTML页面（index.html＆amp; error.html）。当error.html处于活动状态时，我希望后退按钮（Android设备上的硬件按钮）实际返回index.html而不是退出应用程序。我尝试了以下（只是在后退按钮上触发偶数）但没有成功：

<script>
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        console.log("PhoneGap is ready");
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    function onBackKeyDown()
        {
            console.log("yes");
            return false;
        }
</script>

我在这里缺少什么？

Answer 1

document.addEventListener("backbutton")不适用于Onsen UI。

看起来为了使用Onsen-UI处理硬件后退按钮，您应该执行以下操作之一：

ons.ready(function() {
// To disable a navigator back button handler
navigator.getDeviceBackButtonHandler().disable();

// Or to change the behavior
navigator.getDeviceBackButtonHandler().setListener(function(event) {
console.log("back button pressed")});
}

或

<ons-page on-device-backbutton="doSomething()">
Some page content
</ons-page>

请详细阅读他们的文档https://onsen.io/v1/guide.html

Answer 2

。重要的是要了解此事件是由Cordova触发的，因此它需要将cordova.js文件或类似文件（Monaca中的loader.js）包含在应用程序中。

http://onsen.io.s3-website-us-east-1.amazonaws.com/v2/guide/cordova.html

下面是完整的代码，请确保您已在root文件夹（即www文件夹）中添加了cordova.js并将其链接到我们的html页面

}）;

Answer 3

此解决方案（感谢this中的@alecdwm）在Onsen UI PWA中为我工作。当您可以使用Onsen导航器methods时，它可以防止使用硬件后退按钮返回历史状态。我认为这对Cordova / Phonegap也是有用的。

window.addEventListener('load', function () {
    window.history.pushState({ noBackExitsApp: true }, '');
});
window.addEventListener('popstate', function (event) {
    if (event.state && event.state.noBackExitsApp) {
        BackButton();
        window.history.pushState({ noBackExitsApp: true }, '');
    }
});
function BackButton(){
//use navigator.popPage() OR navigator.resetToPage OR .....
}

英语。

Answer 4

var currentPage = null;
ons.ready(function() {
  ons.enableDeviceBackButtonHandler();
  // Set a new handler
  ons.setDefaultDeviceBackButtonListener(function(e) {
    if (currentPage == 'home') {
      if (navigator.app) {
        navigator.app.exitApp();
      } else if (navigator.device) {
        navigator.device.exitApp();
      } else {
        window.close();
      }
    } else {
      $('ons-back-button', '#' + currentPage)
        .parent()
        .trigger('click');
    }
  });

  /**
   * Loads a page
   */
  window.fn.load = function(page, pageData) {
    var content = document.getElementById('content');
    var menu = document.getElementById('menu');
    content
      .load(page, data)
      .then(menu.close.bind(menu))
      .then(function() {
        // Save a reference to current page (because there is no navigator object)
        currentPage = $('ons-page', $('#content')).prop('id');
      });
  };
});

// ons-page example
<ons-page id="other-menu-page">
  <ons-toolbar>
    <div class="left" onclick="fn.load('pages/home.html')" tappable>
      <ons-back-button>Back</ons-back-button>
    </div>
etc...

注意：这是使用ons-splitter代替ons-navigator

的时候

Onsen UI - 处理硬件后退按钮

4 个答案: