Determine if a WebView is invisible using only JS

Question

I have an Android test app with a webView like so:

<WebView
        android:alpha="0"
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

My Main activity loads a page that I have JS content running. JS is enabled using:

webSettings.setJavaScriptEnabled(true);

There is a button on my app that toggles the alpha value from 0 to 1 (show / hide webView).

Is there any "creative" way of detecting the change on the JS side?

Things I tried:

• Checking requestAnimationFrame frame rate changes.
• Visibility API

Update:

Clarification, I'm looking for a JS Only solution, the actual JS code is an SDK used inside a WebView environment.

I have no control over the Android app, full control over the WebView content.

Answer 1

You could subclass android's WebView, override its setAlpha method and add some logic to let the webpage know the current alpha value.

Here is a simplified example:

import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebView;

public class MyWebView extends WebView {

    public MyWebView(Context context) {
        super(context);
        init();
    }

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public MyWebView(Context context,
                     AttributeSet attrs,
                     int defStyleAttr,
                     int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    @SuppressLint("SetJavaScriptEnabled")
    private void init() {
        getSettings().setJavaScriptEnabled(true);
    }

    @Override
    public void setAlpha(float alpha) {
        super.setAlpha(alpha);
        propagateAlphaToWebPage(alpha);
    }

    private void propagateAlphaToWebPage(float alpha) {
        // setWebViewAlpha is a JS function that should be defined in your html's js 
    String jssnippet = "setWebViewAlpha("+alpha+");";
    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
        evaluateJavascript(jssnippet, null);
    } else {
        loadUrl("javascript:"+jssnippet);
    }
}
}

Other related questions you may find helpful:

• Android WebView - detect whether a JS function is defined
• Android Calling JavaScript functions in WebView
• Declaring a custom android UI element using XML

Answer 2

Below is complete code which will tell to JavaScript if WebView is visible or not.

Steps:

1. Create a layout containing a ToggleButton and WebView.
2. Load your html using htmlWebView.loadUrl("file:///android_asset/index.html"); and related code
3. Create a function onToggleButtonPressed() which will be called onClick of toggle button
4. In onToggleButtonPressed() show/hide WebView and at the same time pass the status to JavaScript using htmlWebView.evaluateJavascript() method. Pass visibilityStatusFromAndroid() to JavaScript
5. Get the status in JavaScript from visibilityStatusFromAndroid() function

Android Layout xml code:

<ToggleButton
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:background="@color/red"
    android:onClick="onToggleButtonPressed"
    android:text="Button1"
    android:textOn="Show"
    android:textOff="Hide"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="148dp"
    tools:layout_editor_absoluteY="0dp" />

<WebView
    android:id="@+id/webView"
    android:layout_width="368dp"
    android:layout_height="447dp"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/button"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="56dp"
    android:layout_alignParentLeft="true" />

Java Code:

    WebView htmlWebView; // put it outside onCreate() to make it accessible in onToggleButtonPressed() 

    htmlWebView = (WebView)findViewById(R.id.webView);
    htmlWebView.setWebViewClient(new WebViewClient());
    htmlWebView.loadUrl("file:///android_asset/index.html");
    WebSettings webSetting = htmlWebView.getSettings();
    webSetting.setJavaScriptEnabled(true);

public void onToggleButtonPressed(View view) {

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

        boolean on = ((ToggleButton) view).isChecked();
        String visibility;
        if (on) {
            htmlWebView.setVisibility(View.GONE);
            visibility = "NOT VISIBLE";
                htmlWebView.evaluateJavascript("javascript: " +
                        "visibilityStatusFromAndroid(\"" + visibility + "\")", null);
        } else {
            htmlWebView.setVisibility(View.VISIBLE);
            visibility = "VISIBLE NOW";
            htmlWebView.evaluateJavascript("javascript: " +
                    "visibilityStatusFromAndroid(\"" + visibility + "\")", null);

        }
    }
}

JavaScript file:

function visibilityStatusFromAndroid(message) {
  if (message === "NOT VISIBLE") {
    console.log("webview is not visible");
    // do your stuff here

  } else if (message === "VISIBLE NOW") {
    console.log("webview is visible now");
    // do your stuff here

  }
}

That's it. You are DONE!

Here is Video of working code.

Update:

There is one option that you can use to detect visibility only using JavaScript is document.hasFocus() but this will not work if there is any EditText on the screen and user will focus that EditText.

Just in case below is the code you can use in for document.hasFocus():

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style>
#message { font-weight: bold; }
</style>
<script>
setInterval( checkPageFocus, 200 ); // you can change interval time to check more frequently

function checkPageFocus() {
  var info = document.getElementById("message");

  if ( document.hasFocus() ) {
    info.innerHTML = "The document is VISIBLE.";
  } else {
    info.innerHTML = "The document is INVISIBLE.";
  }
}

</script>
</head>
<body>
  <h1>JavaScript hasFocus example</h1>
  <div id="message">Waiting for user action</div>
</body>
</html>