Android Webview - Change Elements with Javascript after page finished loading

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?

ian cikal · Answer 1 · 2019-10-16T09:44:50.557

0

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

edited Oct 16 '19 at 09:44

answered Oct 14 '19 at 22:39

ian cikal

35
2
8

Thanks for your idea. I will try it later. But what makes the difference in your code? – Simon Libbs Oct 15 '19 at 07:20
@SimonLiebers my code above call **WebChromeClient** too, [reference from another question SO](https://stackoverflow.com/questions/2835556/whats-the-difference-between-setwebviewclient-vs-setwebchromeclient) might be help you. If you just want to load web url then WebViewClient enough for do that. But in many case i always facing same issue when my custom JS not work using **WebViewClient**, after many search on Internet. Finally i found why my custom JS not work, then im only call **WebChromeClient** as magic. Sorry for my poor english. – ian cikal Oct 15 '19 at 12:48
For me it does not change anything. But if i call the javascript in a handler, after delay, it works... @ian cikal – Simon Libbs Oct 15 '19 at 14:26
@SimonLiebers the point is we have waiting after DOM ready, after that we can manipulate it in many way using JS. or in your case send value from Android into **WebView**, – ian cikal Oct 15 '19 at 14:50
Ok makes sense, but how can i wait for DOM? @ian cikal – Simon Libbs Oct 16 '19 at 06:18
@SimonLiebers please see my update, hope the answer more clear now. – ian cikal Oct 16 '19 at 09:46
Is it possible to inject the EventListener in Java, before the Event is triggered? – Simon Libbs Oct 16 '19 at 10:59
please correct if am wrong, did you mean **Java** or **Javascript** ? If you mean javascript, as i know we can execute javascript code before DOM ready. usage like **async**, **await** in promise ES6. but for manipulate elements or event change value inside element. The answer is NO, because The **DOMContentLoaded** event is only way to doing that stuff after DOM hierarchy has been fully constructed. But if you mean **Java**, you can use **Asynctask** or **Service** – ian cikal Oct 16 '19 at 15:49
I want to use Java (Android Studio) to inject code inside Webview (loadURL(javascript: document.getElementById...). The code should executed when dom has loaded. – Simon Libbs Oct 17 '19 at 09:40

Android Webview - Change Elements with Javascript after page finished loading

1 Answers1