Onsen UI - handling the hardware back button

Question

I have a small Phonegap app that has 2 HTML pages (index.html & error.html). When error.html is active I want the back button (hardware button on Android device) to actually go back to index.html instead of exiting the app. I have tried the following (just to trigger an even on the backbutton) with no success:

<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>

What am I missing here?

No, that parts does not show up. It is as if that part is not being triggered at all... — Dustin Tinsley, Sep 18 '16 at 18:19
alright open your `config.xml` file and check if you have a `minSdkVersion` property set if not try to add this one and rebuild your project `` — Sarantis Tofas, Sep 18 '16 at 18:21
Same thing. I get "PhoneGap is ready" so that parts works. But when I hit back button, the app just closes. I do not get any return in the log as expected either. — Dustin Tinsley, Sep 18 '16 at 18:33
I did not have that line so I added it. Still same results. Also, I am using the cloud-based IDE here: https://monaca.io for development. — Dustin Tinsley, Sep 18 '16 at 18:47
@DustinTinsley Does this help you? https://onsen.io/v2/docs/guide/js/#device-back-button — Fran Dios, Sep 21 '16 at 14:21

Sarantis Tofas · Answer 1 · 2016-09-18T19:37:10.660

4

document.addEventListener("backbutton") will not work for Onsen UI.

It looks that in order to handle the hardware back button with Onsen-UI you should do one of the following:

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")});
}

Or

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

Please read more on their documentation https://onsen.io/v1/guide.html

edited Sep 18 '16 at 19:37

answered Sep 18 '16 at 18:52

Sarantis Tofas

5,097
1
23
36

are u using the `onload` event? – Sarantis Tofas Sep 18 '16 at 18:56
@DustinTinsley are you checking the chrome console or the monaca console? cause i remember using monaca and log was not working at all, i had to open the chrome dev console – Sarantis Tofas Sep 18 '16 at 19:07
To big to post here. Here is a link to the full code: http://s000.tinyupload.com/?file_id=05896617351842418294 – Dustin Tinsley Sep 18 '16 at 19:14
The console works for everything except that so I would think it is working as it should be (console i mean). i think i am just overlooking something in my code. – Dustin Tinsley Sep 18 '16 at 19:17
@DustinTinsley updated my answer, you are using the Onser UI framework and the way to listen to the hardware button can be found on their documentation. – Sarantis Tofas Sep 18 '16 at 19:38
I am still at a loss. I have tried these methods with no luck.... I think I need a break. I am sure i am just doing something wrong... – Dustin Tinsley Sep 18 '16 at 21:08
@DustinTinsley yes the back button with Onsen looks like its a little bit tricky but i am sure that when you have the time and you read the documentation everything is going to be fine :D – Sarantis Tofas Sep 18 '16 at 22:05
i would like to think so, but i am so confused with this... ugh. – Dustin Tinsley Sep 18 '16 at 22:59

Syed Kalam · Answer 2 · 2019-10-25T20:43:53.820

0

. It is important to understand that this event is fired by Cordova so it requires cordova.js file or similars (loader.js in Monaca) to be included in the app.

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

below is full code, make sure u have added cordova.js in root folder ie in www folder and linked it to our html page

});

edited Oct 25 '19 at 20:43

answered Oct 25 '19 at 20:17

Syed Kalam

11
4

ingd · Answer 3 · 2019-12-03T00:17:16.260

This solution (thanks to @alecdwm in this post) work for me in Onsen UI PWA. It prevents to go back in history state using hardware back button while you can use Onsen navigator methods. I think it is useful for Cordova/Phonegap too.

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 .....
}

Ingd.

score 0 · Answer 4 · answered Apr 14 '20 at 08:30

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...

NOTE: this is when ons-splitter is used instead of ons-navigator

Onsen UI - handling the hardware back button

4 Answers4