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

Question

I want to change some values on a HTML Page, using Javascript in a Webview. I tried many different ways to evaluate Javscript after page finished loading.

Here is my code:

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

        }
    });

I think it means, that the method is called to early, before page is fully loaded. Do you have any ideas?

Answer 1

in order to change value / content / styling in HTML using javascript also known as DOM Manipulate , then we have waiting after DOM ready or fully loaded. In this case, we load the page into widget WebView and then do our business.

I have a sample code that I always use in the same case,

...

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

...

I hope the code above can help you to continue working..

---

Update for Waiting DOM Ready

If you have use jQuery before, then you must know

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

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

Im use this trick to manipulate page in WebView after DOM ready (in example 2 native JS way).

Another question why not using runnable?

because we never know internet speed users, let say if we set runnable to wait 3000ms or 3sec but the web not responding after runnable execution. What happened next? users will have white blank screen and keep waiting.

hope this more clear now.

reference link: https://developer.mozilla.org/.../DOMContentLoaded_event