时间戳

首页 > 解决方案 > Android Webview - 页面加载完成后使用 Javascript 更改元素

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

问题描述

我想在 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();

        }
    });

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

标签： javascriptandroiddomwebview

解决方案

为了使用 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在 runnable 执行后网络没有响应。接下来发生了什么？用户将有白色的空白屏幕并继续等待。

希望现在更清楚。

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

推荐阅读