Stop the back button from closing the Cordova application

Question

Stop the back button from closing the Cordova application

I've encountered a persistent issue in my cordova application where the back button consistently exits the app, regardless of any attempted solutions. I have diligently searched for answers online and tested various strategies, but none have proven successful.

Every solution I've implemented (as shown below) yields the same outcome.

document.addEventListener("backbutton", onBackKeyDown, false);

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

The code within my callback function executes smoothly, but triggers an app exit afterward. While introducing a ReferenceError in my function can prevent the exit, it doesn't align with best practices.

console.log(undefinedVar);

Additional attempts to remedy the issue have involved utilizing event.preventDefault() within the callback and implementing ionic's registerBackButtonAction function.

If anyone has any recommendations or insights, they would be greatly appreciated.

javascript android cordova

Answer 1

Answer №1

insert code here

<!DOCTYPE html>
<html>
  <head>
    <title>Stop Back Button</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>
        function getTitle() {
            document.getElementById("ct").innerHTML = "DEMO: " + document.title;
        }
    </script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
        getTitle();
    }
    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // Handle the back button
    //
    function onBackKeyDown() {
        alert('Back Button Disabled');
        console.log('Back Button Disabled');
    }
    </script>
  </head>
  <body onload="onLoad()">
  <ul id="nav">
        <li><a href="index.html">&larr; Back</a></li>
        <li><a href="#" id="ct" onclick="location.reload();"></a></li>
    </ul>
  </body>
</html>

Answer 2

insert code here

<!DOCTYPE html>
<html>
  <head>
    <title>Stop Back Button</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>
        function getTitle() {
            document.getElementById("ct").innerHTML = "DEMO: " + document.title;
        }
    </script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
        getTitle();
    }
    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // Handle the back button
    //
    function onBackKeyDown() {
        alert('Back Button Disabled');
        console.log('Back Button Disabled');
    }
    </script>
  </head>
  <body onload="onLoad()">
  <ul id="nav">
        <li><a href="index.html">&larr; Back</a></li>
        <li><a href="#" id="ct" onclick="location.reload();"></a></li>
    </ul>
  </body>
</html>

Stop the back button from closing the Cordova application

Answer №1

Similar questions

What is the most effective approach for managing nested callbacks in Node.js/Expressjs?

Using Android to access RESTful APIs

How can I use query to swap out elements within a div when clicked?

Declare the variable as a number, yet unexpectedly receive a NaN in the output

The behavior of TypeScript class inheritance differs from that of its ES6 equivalent

Error: Attempting to access a property of an undefined object using method chaining

Obtain a Compilation of Video Sources in an HTML5 Format

Repeated firing of jQuery's Ajaxstop within a click event

jquery and radio button technology

Dealing with the element not present error in Protractor can be managed by using various

Utilizing JQuery Template to Invoke JavaScript Functions

Deliver integers using Express.js

NodeJS domain error handling failing to catch ReferenceError exceptions

Hyphens make Tablesorter sort numeric fields uniquely

Identify whether the final digit falls within the range of 1-4 or 5-9, and then apply styling to the corresponding

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

What is the best way to merge two tables together using the server-side JQuery Datatable plugin?

Traverse through the JSON data until a certain condition is satisfied, then proceed to tally the number

Traverse the array of nested JSON objects in an iterative manner

What could be causing TypeORM skip() and take() function to not function properly?