Android Webview - 页面加载完成后使用 Javascript 更改元素

Question

我想在 Web 视图中使用 Javascript 更改 HTML 页面上的一些值。 在页面加载完成后，我尝试了许多不同的方法来评估 Javscript。

这是我的代码：

    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setDomStorageEnabled(true);
    webview.getSettings().setBlockNetworkImage(false);

    webview.setWebViewClient(new WebViewClient() {
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }


        public void onPageFinished(WebView view, String url) {

            webview.loadUrl("javascript:(function() { document.getElementById('options').value = '" + found.getId() + "'; ;})()");
            button.performClick();

        }
    });

我认为这意味着该方法在页面完全加载之前被提前调用。 你有什么想法吗？

Answer 1

为了使用javascript（也称为DOM Manipulate）更改HTML 中的值/内容/样式，然后我们在DOM 准备好或完全加载后等待。在这种情况下，我们将页面加载到小部件 WebView 中，然后执行我们的业务。

我有一个示例代码，我总是在相同的情况下使用，

...

    final String url = "http://example.com";
    final WebView webview = findViewById(R.id.my_webview);
    final String myNewValue = "it works!";

    webview.getSettings().setJavaScriptEnabled(true);
    webview.setWebChromeClient(new WebChromeClient());
    webview.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            // Your custom javascript here
            String myCustomJS = "document.getElementById('options').innerHTML = '" +
                     myNewValue + "'";

            // here we execute the javascript code
            webview.loadUrl("javascript:(function(){" + myCustomJS + "})()");
        }
    });

    // and here we load the url
    webview.loadUrl(url);

...

我希望上面的代码可以帮助你继续工作..

---

等待 DOM 就绪

的更新

如果你以前用过jQuery，那你一定知道

// example 1: jQuery way
$(document).ready(function() {
    // place our logic here
});

// example 2: native javascript way
document.addEventListener('DOMContentLoaded', function() {
    // place our logic here
});

我使用这个技巧在 DOM 准备好后在 WebView 中操作页面（以 示例 2 原生 JS 方式）。

另一个问题，为什么不使用 runnable？

因为我们永远不知道网速用户，假设我们将 runnable 设置为等待 3000ms 或 3sec 但 web 在 runnable 执行后没有响应。 接下来发生了什么？用户将出现白色空白屏幕并继续等待。

希望现在更清楚。

参考链接：https://developer.mozilla.org/.../DOMContentLoaded_event