Home Home Intercepting Android Back Button In Intel XDK

Intercepting Android Back Button In Intel XDK

This post is a part 10 of Intel XDK Complete Tutorial post series.

When you are creating a Intel XDK app you are likely to develop a multipage app. A multipage app can have multiple HTML files each indicating a page or else you can use libraries like jQuery mobile or Intel foundation to create multiple pages.

Problem with Multiple pages in Android

When you have multiple pages in form of multiple HTML files, clicking the back button takes you to the previous page. This is want you wanted!!!.

But when create multiple pages using jQuery mobile or any other library, clicking the back button actually takes you away from the app. This is not what you wanted!!!! In this case you intercept the back button and change page manually.

Here is code snippet on how to intercept back button:

        document.addEventListener("intel.xdk.device.ready",function() {
            //this function intercepts the backbutton click. When user clicks the back button it fires the intel.xdk.device.hardware.back event.
            intel.xdk.device.addVirtualPage();
        },false);

       
        document.addEventListener("intel.xdk.device.hardware.back", function() {
            //continue to grab the back button
            intel.xdk.device.addVirtualPage();
        }, false);

On emulator you can emulate this event also
Screen Shot 2014-11-05 at 11.16.20 pm

Narayan Prusty
Intel XDK App State Change DetectionStyling HTML5 Input Elements
Comments: 9
  1. 2 years ago

    Android Tips & Tricks | Android Problems Solution.

    All the Android Tips & Tricks and Android Problem’s Solution User Get Here. And Here We provide many Different Apps & Games Categories Available here. And All the Latest Android News We provide our User. And user can contact us if him have any problem in his Android Phone.

    ReplyCancel
  2. Zahid
    3 years ago

    How i can close App onBack Button Pressed ?? in XDK

    ReplyCancel
  3. Jeferson
    4 years ago

    Hi,

    I’m trying to intercept the hardware backbutton, so in a specific page it make the app exit. Button nothing is happening after I added the above code. Any help? Thanks.

    document.addEventListener("intel.xdk.device.ready",function() {
    //this function intercepts the backbutton click. When user clicks the back button it fires the intel.xdk.device.hardware.back event.
    intel.xdk.device.addVirtualPage();
    },false);

    document.addEventListener("intel.xdk.device.hardware.back", function() {
    //continue to grab the back button
    intel.xdk.device.addVirtualPage();
    alert('back');
    if ($('.upage:visible').attr('id') === 'mainpage') {
    navigator.app.exitApp();
    } else {
    // how to code default behavior?
    }
    }, false);

    ReplyCancel
  4. reytabs
    4 years ago

    how to disable login page . .when i proceed to main page. .i wan to disable back session button. .how to solve it.

    ReplyCancel
  5. Ray
    4 years ago

    Thanks mate, I am using the following code for navigating into multiple pages mate. The problem is that the Intel xdk virtual page code doesn’t work for Hardware Back Button usage. Pressing that Hardware Back Button takes me out of the App and that I don’t want happening mate:

    function LoadDivs(start){
    var div;
    while((div = document.getElementById(‘div’ + start)) !== false) {
    div.style.display = (div.style.display == ‘none’) ? ” : ‘none';
    start ++;}}

    Home  
    About  
    Part 1  
    Home
    About

    Thanks in advance. I am still working on cleaning my code so it replaces the navigation when one is clicked lol

    ReplyCancel
    • 4 years ago

      You should call intel.xdk.device.addVirtualPage() inside device ready event so that it can start intercepting the back button. Everytime you intercept call it again to intercept again.

      ReplyCancel
  6. Ray
    4 years ago

    Narayan, the code is ok but how do we implement it into multiple pages? Is there a call to function?

    ReplyCancel
    • 4 years ago

      There are two ways to implement multiple pages:
      1. Multiple HTML files
      2. Using a Framework like jQuery Mobile.

      If you are using Multiple HTML Files then pressing this button automatically takes you to the previous page.

      But if you are using jQuery mobile then you need to intercept it and take to the previous page manually.

      Hope this answered your question.

      ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

5 years ago 10 Comments Cordova
Share this
Related Articles