Capture the native back button event from within webview

Question

Im new to webviews and trying to do an app using it. I have a popup that is displayed using javascript. It has a close button to close. Along with the close button, I want to make use of the native back button.

That is, if user clicks the back button, my popup should be closed.

My doubt is, does it require any changes from native app? Or the webviews convert the back button action to some events like keypress that the webview can understand?

Are you using phonegap? What exactly are you using? – Buzinas Sep 01 '15 at 22:51 — Buzinas, Sep 01 '15 at 22:51
Can you update where you're at @goose? – Reed Spool Sep 03 '15 at 01:58 — Reed Spool, Sep 03 '15 at 01:58

Reed Spool · Accepted Answer · 2015-08-31T01:40:25.540

2

I don't know if you have HTML5 support, but if so history.pushState and history.onpopstate from the History API will do exactly what you want.

When the popup is displayed, use pushState to inform the browser of a new history entry, same as if the popup was instead a new page.

Then add an event listener to history.onpopstate which closes the popup, if it's open.

edited Aug 31 '15 at 01:40

answered Aug 30 '15 at 00:03

Reed Spool

843
7
15

You're suggesting that I should listen to the above said events and perform the close action when it fires? – Ivin Aug 30 '15 at 20:23
Yes! Edited to elaborate! – Reed Spool Aug 31 '15 at 01:40

score 2 · Answer 2 · edited May 23 '17 at 12:06

2

You could try mixing some question and their solutions:

Intercept the back button tap event in Android
Exec a js function inside the webview (from the outside)
That will trigger an event in the document
Listen to this event using document.addEventListener and here close your dialog/alert

edited May 23 '17 at 12:06

Community

1
1

answered Sep 02 '15 at 13:54

lifeisfoo

15,478
6
74
115

score 1 · Answer 3 · answered Aug 28 '15 at 02:12

1

If you are using Cordova, it offers an event to track the back button on Android devices:

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

You can override this event and implement your own behaviour. Other than this there is should not be a way to track the back button event.

answered Aug 28 '15 at 02:12

icyKira

144
5

I'm not using Cordova for this project. – Ivin Aug 30 '15 at 20:22

score 1 · Answer 4 · answered Sep 02 '15 at 14:24

Clicking backbutton would close your viewcontroller which shows the modal.

I guess you don't want that happen, and just close the javascript modal.

Yes you would need to change your native code.

On native backbutton click, 

if your modal is open:
  close the modal
else:
  do default backbutton action.

Below is a detailed explanation.

On native backbutton click # your native code to intercept the back button

if your modal is open: 
# there are multiple options here
# first strategy 
#   let javascript inform native side when it opens/closes popup 
#   native just needs to check the status he has
# second strategy
# native asks javascript if he has a modal open
# this is a bit tricky because native can't get a return value from javascript
# native asks javascript to tell native if he has a modal open (native->javascript + javasciprt -> native two function calls)
# native checks what javascript just said

    close the modal
    # this is easy, ask javascript to close it.

I assumed you know how to communicate between javascript & native, if not take a look at http://www.smashingmagazine.com/2013/10/best-of-both-worlds-mixing-html5-native-code/

score 1 · Answer 5 · answered Sep 02 '15 at 16:36

To further aid what lifeisfoo stated:

public class WebViewer
WebView webView;
@Override
public void onBackPressed() {
    if (webView.hasPopUp()) {
        webView.loadUrl("javascript:closePopUp()");
    } else {
        super.onBackPressed();
    }
}

Capture the native back button event from within webview

5 Answers5