Determine if a WebView is invisible using only JS
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:
There is (currently) no JS-only solution.
The content of the WebView isn't supposed to be able to get information about its environment.
The only exception is information which was volunteered by the environment itself.
This would contradict basic sandboxing and could lead to security issues.
As there is no standard API that would give you the information you want you would have to change the environment yourself to expose it to the WebView.
If you can't change the environment what you are requesting is (theoretically) impossible with the current browsers/android.
@Hack To find an actual loophole we could exploit to get the alpha value we would need more detailed information about the JS SDK, the environment and how much influence on the android / webview side of the app you have.
And even then after investing much effort the result would most likely be the same.
Below is complete code which will tell to JavaScript
if WebView
is visible or not.
Steps:
- Create a layout containing a ToggleButton and WebView.
- Load your html using
htmlWebView.loadUrl("file:///android_asset/index.html");
and related code - Create a function
onToggleButtonPressed()
which will be calledonClick
of toggle button - In
onToggleButtonPressed()
show/hide WebView and at the same time pass the status to JavaScript usinghtmlWebView.evaluateJavascript()
method. PassvisibilityStatusFromAndroid()
to JavaScript - 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 frequentlyfunction 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>