Определите, является ли WebView невидимым, используя только JS

Question

У меня есть тестовое приложение для Android с webView, например:

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

Мое основное занятие загружает страницу, на которой у меня запущен контент JS.JS включается с помощью:

webSettings.setJavaScriptEnabled(true);

В моем приложении есть кнопка, которая переключает альфа-значение с 0 на 1 (показать / скрыть веб-просмотр).

Есть ли какой-либо "творческий" способобнаружения изменений на стороне JS?

Что я пробовал:

• Проверка requestAnimationFrame изменения частоты кадров.
• ВидимостьAPI

Обновление:

Уточнение, я ищу решение JS Only , фактический код JSSDK, используемый в среде WebView.

У меня нет контроля над приложением Android, полный контроль над содержимым WebView.

Answer 1

Ниже приведен полный код, который сообщит JavaScript, является ли WebView видимым или нет.

Шаги :

1. Создайте макет, содержащийa ToggleButton и WebView .
2. Загрузите HTML-код, используя htmlWebView.loadUrl("file:///android_asset/index.html"); и соответствующий код
3. Создайте функцию onToggleButtonPressed(), которая будет вызываться onClick кнопки переключения
4. В onToggleButtonPressed() показать / скрыть WebView и одновременно передать статус JavaScript, используя метод htmlWebView.evaluateJavascript().Передать visibilityStatusFromAndroid() в JavaScript
5. Получить статус в JavaScript из visibilityStatusFromAndroid() function

XML-код макета Android:

<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:

    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:

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

  }
}

Вот и все.Вы СДЕЛАНЫ!

Вот Видео рабочего кода.

Обновление:

Тамэто одна из опций, которую вы можете использовать для определения видимости только с использованием JavaScript это document.hasFocus () , но это не будет работать, если на экране есть какой-либо EditText и пользователь сфокусирует этот EditText.

На всякий случай ниже приведен код, который вы можете использовать для 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>

Answer 2

(в настоящее время) не существует решения только для JS.

Предполагается, что содержимое WebView не сможет получать информацию о своей среде.
ЕдинственноеИсключением является информация, которая была вызвана самой средой.

Это противоречило бы базовой песочнице и могло привести к проблемам безопасности.

Поскольку не существует стандартного API, который бы предоставил вам необходимую информацию, вам придется самостоятельно изменить среду, чтобы открыть ее для WebView.

Если вы не можете изменить среду, чтоВы запрашиваете (теоретически) невозможно с текущими браузерами / Android.

---

@ Hack Чтобы найти реальную лазейку, которую мы могли бы использовать, чтобы получить значение альфа, нам потребовались бы более подробныеинформация о JS SDK, окружающей среде и о том, как сильно вы влияете на андроид / веб-версию приложения.
И даже после этого, приложив много усилий, результат, скорее всего, будет таким же.

Answer 3

Вы можете создать подкласс для Android WebView, переопределить его метод setAlpha и добавить некоторую логику, чтобы веб-страница знала текущее альфа-значение.

Вот упрощенный пример:

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);
    }
}
}

Другие связанные вопросы, которые могут оказаться полезными:

• Android WebView - определить, определена ли функция JS
• Android Вызов функций JavaScript в WebView
• Объявление элемента пользовательского интерфейса Android с использованием XML