Detect use of Android back button using JavaScript

Question

My site has breadcrumbs which highlight which stage in a process the user has reached. The breadcrumbs rely on the browser history to tell which stage should be highlighted when the browser back button is used, but on Android devices using the hardware back button this seems to be bypassed and the highlighted breadcrumb does not change.

My site is not using PhoneGap or anything similar as it's not usually a mobile site, so is it possible to capture use of the Android back button so that I can add an event to set the breadcrumb highlight based on the history log when the button is used, just using JavaScript or jQuery?

I haven't tried anything. I just want to know if it is possible to capture the device back button, and if so, how to do it. I don't know of anything to try, as I don't know if it is even accessible to javascript. — Carasel
– Carasel, Commented Dec 4, 2013 at 11:44
Thanks, but this is not an android app, it is just a website, so I am looking for a way to detect the back button without using Java. — Carasel
– Carasel, Commented Dec 4, 2013 at 11:55
Ah, I followed the thread of SO answers and eventually got to this one: stackoverflow.com/questions/136937/… — Eric L.
– Eric L., Commented Mar 13, 2014 at 16:53
The browser will catch the android back button event and fire popstate. But we wouldn't know if all popstate events come from android back button, or there is also a back button in the broswer. — Xuezheng Ma
– Xuezheng Ma, Commented Jun 18, 2018 at 21:46

Navjot Ahuja · Accepted Answer · 2018-06-13 10:19:51Z

3

1. Use popstate event.

https://developer.mozilla.org/en-US/docs/Web/Events/popstate

window.onpopstate = function(e) { 
   updateBreadCrumbObservable();
};

2. Use onhashchange event.

window.onhashchange = function(e) {
   updateBreadCrumbObservable();
}

You can use event argument to get more description about the event fired.

answered Jun 13, 2018 at 10:19

Navjot Ahuja

1,1817 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ignacio Ara Over a year ago

Thanks @Navjot Ahuja, I've tested and both events are launched in every navigation through the page but, how can I know if the user has launched it or it has been the android back button? Kind regards

Ignacio Ara Over a year ago

I've compared ALL event attributes and all of them have the same values :(

yeshashah Over a year ago

Why do you need to have a separate behaviour for hardware and browser back button? They should technically behave the same way for the user. In that case, answer given by @NavjotAhuja will work fine.

Ignacio Ara Over a year ago

Sorry perhaps my message was unclear. I meant that how can I know if the user clicks a button (every navigation in page launches both functions) or if the user has pressed return to last page / back button in Android. Thanks and sorry again.

Rahul Khurana · Accepted Answer · 2018-06-19 05:55:06Z

1

You can put check on inside onBackPressed method of the activity and before calling super.onBackPressed(); trigger the method to call javascript method.

for e.g:

override fun onBackPressed() {
    if (handleBackPress) {
        myWebView.loadUrl("javascript:backButtonPressed()")
    }else {
        super.onBackPressed()
    }
}

in the above example if handleBackPress boolean variable is true, then it will try to call backButtonPressed() method of javascript file in the webview.

Let me know if you need any explanation or help.

answered Jun 19, 2018 at 5:55

Rahul Khurana

8,8747 gold badges38 silver badges65 bronze badges

4 Comments

AA Shakil Over a year ago

Nice and +1 but What's fun here?

Rahul Khurana Over a year ago

the code is in kotlin language.. which means it is a function

Rahul Khurana Over a year ago

in java you can write it like, "public void onBackPressed()" .. :)

Ignacio Ara Over a year ago

@RahulKhurana we're not using Java/Android, this is just a mobile site that uses JavaScript

Collectives™ on Stack Overflow

Detect use of Android back button using JavaScript

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related