Question

I have a webview that shows a message to confirm an user interaction. That message should fade out after any user interaction somewhere else on that page. To do this I detect any onTouchEvent and inject back a call to the webpage to trigger the message to fade out.

This works well for the first time but if I do it a second time (the webpage is not reloaded but the message is shown again through javascript by setting opacity back to 1 and display to “block”) the message appears again but then fades out immediately w/o any user interactions. From the log statement I can see that the onTouchEvent does not get triggered and I do not inject the javascript.

I suspect that the loadURL creates some resilient call in the webpage that sticks around and somehow activates again.
Is there any way to clear this and see this executed only once ?

I catch the onTouchEvent in my WebView like this:

    final class MyWebView extends WebView {
    ...
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.v(TAG,"onTouchEvent");
        if (mUndoActive && (event.getAction() == MotionEvent.ACTION_DOWN)) {
            mUndoActive = false;
            mLastAction = LAST_ACTION_NONE;
            Log.v(TAG,"send hide message");
            handler.sendEmptyMessageDelayed(CLICK_ON_WEBVIEW, 300);
        }
        return super.onTouchEvent(event);
    }
}

In the parent activity I override the handleMessage and inject a javascript to my webview to trigger the javascript that fades out a message element like this:

    @Override
    public boolean handleMessage(Message msg) {
      Log.v(TAG,"handleMessage triggered");
      if (msg.what == CLICK_ON_WEBVIEW){
        Log.v(TAG,"handle message registerd click from stack view web page");
        webview.loadUrl("javascript:hideMessage()");
        return true;
      }
      return false;
    }

and the javascript in the webview is:

function hideMessage() {
  var message = document.getElementById("message");
  if (message != null) {
    if (!message.style.opacity) {
     message.style.opacity = 1;
    } 
    var fader = setInterval(function(){
      message.style.opacity -= .02;
      if (message.style.opacity <= 0) {
        clearInterval(fader);
        message.style.display = "none";
      }
    }, 25);
   }
 }

Answer 1

I found a soulution myself: Preceding the 2 Interval calls with window, ie. window.clearInterval(fader) did fix the issue. I don’t quite understand why but it looks like the interval timer did keep running permanently and was not properly turned off.