How to close html dialog in Android on press of back key

Question

I have created a webview in Android in which i am loading my html file.At the time of clicking a button i am displaying a pop up like alert dialog which is developed in html itself. Now problem is as soon as i press back button on android phone,application is returning to previous page.But with identical behavior only dialog should be closed and application should be on same page. How can i achieve it? Thanks

go to this:[http://stackoverflow.com/questions/4065312/detect-click-on-html-button-through-javascript-in-android-webview/4075955#4075955](http://stackoverflow.com/questions/4065312/detect-click-on-html-button-through-javascript-in-android-webview/4075955#4075955) — M D, Feb 12 '14 at 12:13

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

I think you do not need the JavascriptInterface (as @Henil posted). I would do it like so:

in Java - onBackPressed:

if (webView.getUrl.equals("yourPopupUrl.com")) {
  webView.loadUrl("javascript:goAwayPopup();");
  return;
}

in JS:

function goAwayPopup() {
  var popUp = document.getElementById("popUp"); // in my case popUp is just a <div>
  var isVisible = popUp .offsetWidth > 0 || popUp .offsetHeight > 0;
  if (isVisible) {
    popUp.style.display = 'none';
  }
}

EDIT:

Solution with JavascriptInterface:

in JS - function which is called when dialog popups:

function popUp() {
  if (typeof Android != "undefined"){ 
    if (Android.popUp!= "undefined") {
      Android.popUp();
    }
  }
}

in Java:

define a inner class and a boolean field in your Activity

declare the bridge to your webview

override onBackPressed

private boolean isPopUpVisible = false;

// some code...

webView.addJavascriptInterface(new MyJavascriptBridge(), "Android");

// some code...

class MyJavascriptBridge { 

  public void popUp() {
    if (isPopUpVisible)
      isPopUpVisible = false;
    else
      isPopUpVisible = true; 
  }
}

onBackPressed:

if (isPopUpVisible) {
  webView.loadUrl("javascript:goAwayPopup();");
  return;
}

JS, again:

function goAwayPopup() {
  // close alert here...
  popUp(); // sets isPopUpVisible to false
}

Here is a post of closing a alert: How to "auto close" Alert boxes

edited May 23 '17 at 10:33

Community

1
1

answered Feb 12 '14 at 15:44

A.D.

1,412
2
19
37

Thanx,I tried this way but Java popUP() Function is not called from JS . – Eshika Feb 17 '14 at 08:55
Where/When do you call popUp in your JS-Code? – A.D. Feb 17 '14 at 09:44
i calling it as its shown by you and in this i am hiding my popup,popup is getting hidden but when i press back key,page is not going back. – Eshika Feb 17 '14 at 09:57
I have used the same above code but why in my code typeof Android is coming as undefined and because of it i am getting Uncaught ReferenceError: Android is not defined exception – Eshika Feb 19 '14 at 11:20
Die you really set the JavaScriptInterface correctly? Did you enable JavaScript in your webview? – A.D. Feb 21 '14 at 05:52
I am able to resolve it as my html file was called from fragment instead of Activity.so i need to call fragment class javascript method from onbackkeypressed method.But the problem is at first time pop up is showing false even popup is present.Any idea what can be reason for that? – Eshika Feb 21 '14 at 06:25

Shah · Answer 2 · 2014-02-12T12:24:52.527

0

Use java script interface and handle html page from that interface

edited Feb 12 '14 at 12:24

answered Feb 12 '14 at 12:08

Shah

76
4

I did that but i am not getting the instance when pop up is opening so that i can hide it on press of back key.Can you plz explain with some code.It will be rly helpfull – Eshika Feb 12 '14 at 12:10

How to close html dialog in Android on press of back key

2 Answers2