javascript - Determine if a WebView is invisible using only JS - Stack Overflow

admin管理员组

文章数量:1296259

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.

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.

• javascript
• android
• google-chrome
• android-webview
• alpha

Share Improve this question Follow edited Jun 21, 2018 at 11:28 Vikasdeep Singh 21.8k1616 gold badges8282 silver badges106106 bronze badges asked Jun 6, 2018 at 13:06 Roni GadotRoni Gadot 48733 gold badges1919 silver badges3131 bronze badges 2

• Why can't you check visibility or display styles on document/body element of the webview? And what issue you got with Visibility API? – Harshali Talele Commented Jun 19, 2018 at 10:02
• 1 maybe you find a way to take a screenshot of the WebView from the JS and see if it has all same color or not. – Mohammad Ersan Commented Jun 19, 2018 at 13:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

Below is plete 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>

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.

本文标签： javascriptDetermine if a WebView is invisible using only JSStack Overflow