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.

Where is your code? What have you tried so far and why has it failed? — Constantin Groß, Nov 03 '17 at 09:32
SO ain't a homework forum dude, show us your work and we'll help — mrid, Nov 03 '17 at 09:33
Plus, it's a bad thing to override the behaviour of the system keys. If the user wants to go back, let them go back. — Constantin Groß, Nov 03 '17 at 09:33
when you have opened a website in say, Chrome, when you press back, Chrome app will handle it, not your app — mrid, Nov 03 '17 at 09:35
But I dun know how to detect the back button android on website. — monkeyT4A, Nov 03 '17 at 09:37
If you are using cordova, please visit [this](https://cordova.apache.org/docs/en/5.1.1/cordova/events/events.backbutton.html) link. You can override device back button functionality — Flutterian, Nov 03 '17 at 09:38
are you opening the website in your app itself or a browser ? — mrid, Nov 03 '17 at 09:40
@androidOnHigh javascript jquery html. I want to know is jquery or javascript can detect android back button event? — monkeyT4A, Nov 03 '17 at 09:49
@androidOnHigh For cordova, I use it to create apps. But the time I use my apps to open the website, it is not related to cordova anymore. I can detect back button in cordova but not in website. — monkeyT4A, Nov 03 '17 at 09:53
did you found that how to get the event when user clicks bottom back button of a mobile — Sri, Aug 31 '18 at 09:55

score 6 · Answer 1 · edited Aug 31 '21 at 16:31

6

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

edited Aug 31 '21 at 16:31

Peter Mortensen

30,738
21
105
131

answered Nov 03 '17 at 09:42

nitinkumarp

2,120
1
21
30

@nitinkumarp yes i know this method. But I dont want Java. I did not down vote too. – monkeyT4A Nov 03 '17 at 09:48
When it can be easily handled by Android why you need JS code to detect Android back. Handled your Website back navigation and it will work as you want. – nitinkumarp Nov 03 '17 at 09:52

score 6 · Answer 2 · edited Aug 31 '21 at 15:56

6

You can also achieve it using JavaScript.

Use the below method or try to find deviceReady method.
```
 <body onload="onLoad()">
```

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.

edited Aug 31 '21 at 15:56

Peter Mortensen

30,738
21
105
131

answered Nov 03 '17 at 09:54

Flutterian

1,761
1
21
47

1

This one works well in apps. But when the website is open, it cannot work. Like normally we did is if keycode == back, then it goes back. This one is for website. But how can I get the keycode of back button on android phone? So then I can do something on it. – monkeyT4A Nov 03 '17 at 09:59
I have edited my answer. Please look once. You can check with hashChange event. I have added example also how to do it. – Flutterian Nov 03 '17 at 10:01
1

Nope. I saw this method but it does not fit my requirement. – monkeyT4A Nov 03 '17 at 10:13
Can you please check this [link](http://www.bajb.net/2010/02/browser-back-button-detection/). Might be it will work for you. – Flutterian Nov 03 '17 at 15:11

score 3 · Answer 3 · answered Jul 18 '18 at 14:35

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.

score 1 · Answer 4 · edited Aug 31 '21 at 16:23

1

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?

edited Aug 31 '21 at 16:23

Peter Mortensen

30,738
21
105
131

answered May 21 '19 at 08:38

Mahdi Bashirpour

17,147
12
117
144

This requires at least one navigation, no? So it won't detect if back button was used right after the very first load of the page/app. Is there a way to cover that case too? – HolyResistance Aug 29 '22 at 17:17
Maybe quickly navigating away and then back so that the page immediately has a navigation history or something like that... Could that work? – HolyResistance Aug 29 '22 at 18:34

Use JavaScript/jQuery to detect the Android back button

4 Answers4

Linked