如何在应用程序恢复时在 Android WebView 中触发 javascript 事件

Question

我的 Android 应用中有一个 WebView，我需要随时运行 JavaScript 函数

1. 应用/WebView 切换到（例如，使用应用切换器或点击主屏幕上的图标）
2. 设备从睡眠中唤醒（设备进入睡眠状态时应用仍显示在屏幕上）。

在我的网页 javascript 中使用 visibilitychange 事件侦听器仅适用于案例 1。

理想情况下，我想使用 Android onResume() java 函数触发某种 javascript 事件，但如何？

Answer 1

您可以使用 WebView evaluateJavascript() 方法来做到这一点。

首先你需要在你的网页javascript中创建一个事件，并添加事件处理程序：

window.appResumeEvent = new Event('appresume');

window.addEventListener('appresume', yourFunction, false);

function yourFunction() {…}

在全局范围内设置创建应用恢复事件很重要（可以通过将其设置为window 的属性来实现）。

现在，在您的 Android onResume() 方法中，运行 evaluateJavascript() 方法：

@Override
protected void onResume() {
    super.onResume();
    mainWebView.evaluateJavascript("(function() { window.dispatchEvent(appResumeEvent); })();", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {

        }
    });
}

请注意，javascript 必须包含在立即调用的函数表达式中。另请注意dispatchEvent() 将事件变量作为参数，而不是事件名称字符串。

更多信息：Creating and dispatching events in javascript (MDN)

对于我的完整 MainActivity.java 点击 show sn-p:

import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView mainWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mainWebView = findViewById(R.id.activity_main_webview);
        mainWebView.setWebViewClient(new WebViewClient());
        WebSettings webSettings = mainWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        mainWebView.loadUrl("file:///android_asset/www/index.html");
    }

    @Override
    protected void onResume() {
        super.onResume();
        mainWebView.evaluateJavascript("(function() { window.dispatchEvent(appResumeEvent); })();", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {

            }
        });
    }
}