Use JavaScript/jQuery to detect the Android back button

Question

Currently I want to make a function to detect the Android back button is pressed and do some stuff on it.

The user opens the app, and clicks a button. This button lets the user to open a website.
The user fills in the information on page 2, and he/she wants to go back the previous page, and he/she clicks the back button on the Android phone.
The back button helps the user close the website and go back to my apps instead of back to page 1.

How can I do this with jQuery or JavaScript to check the back button pressed by user? So that I can prevent the back button close the website, but redirect to another page.

Is there a way to detect the browser Android back button event? I want to override the default setting of the Android back button, and add some code inside.

PS: Not using Java.

The back button on top (browser back button) can goes back to previous page.
The back button on the bottom (back button phone) helps me close the website.
I want make the bottom back button also goes back to the previous page.

See this.

user_5260051 · Answer

You need to override the onBackPressed on WebView Activity and check if webview can go back or not.

@Overide
public void onBackPressed() {
    if(webview.canGoBack())
        webview.goBack();
    else
        super.onBackPressed();
}

_{Meta: When this answer was given, the question was not specific for "JavaScript only" and "not coding in Java", etc.. i.e. handle only by the backend. This answer is strictly for the Android side, not for the backend side. I am keeping this answer if someone from Android need this answer.}

user_2064295 · Answer

You can also achieve it using JavaScript.

Use the below method or try to find deviceReady method.
```
 
```

Put the below code in your main.js. This function will get call once body will get load.

 function onLoad() {
     document.addEventListener("deviceready", onDeviceReady, false);
 }

On device ready is function which gets trigger once your device is ready.

 function onDeviceReady() {
     // Register the event listener
     document.addEventListener("backbutton", onBackKeyDown, false);
 }

Once your ready, you can override your back button functionality.
```
 function onBackKeyDown() {
     // Do stuff here
 }
```

May I know is this what you was looking for?

Or you can use the hashChange event

window.addEventListener("hashchange", function(e) {
    // ...
})

If you need to support older browsers, check out the hashChange Event section on Modernizr's HTML5 Cross Browser Polyfills wiki page.

user_4139335 · Answer

I would say you should focus on the feature and not the device's implementation of that feature.

The Android Back Button has the same behavior as the browser back button.

As both react to the URL state you can control the behavior through the URL. You can achieve this through pushState. You can read about pushState from MDN here and here is a CSS Trick article about using it.

user_6569224 · Answer

You can do this with JavaScript and without jQuery

window.addEventListener("hashchange", function(e) {
    if(e.oldURL.length > e.newURL.length)
        alert("back")
});

Demo in CodePen

Source: How can I control the back button event in jQuery Mobile?

Use JavaScript/jQuery to detect the Android back button

4 Answers