Android WebView always returns null for javascript

Question

I try to fill out a form inside a webview from the android client app. I know how it should work, but the getElementById always returns null for me. I tried it on different websites.

Here is my example for www.google.com.

MyWebView view = new MyWebView(this);
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl("http://www.google.com");
view.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView v, String url) {
        v.loadUrl(url);
        return true;
    }
    @Override
    public void onPageFinished(WebView v, String url) {
        v.loadUrl("javascript:document.getElementById('mib').value = 'aaa';");              
    }
});
setContentView(view);

And the MyWebView class (only for information).

class MyWebView extends WebView {
    Context context;
    public MyWebView(Context context) {
        super(context);
        this.context = context;
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // do some multi touch stuff
        return true;
    }
}

I always get the error:

09-01 04:35:26.453: I/chromium(2962): [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot set property 'value' of null", source: https://www.google.de/?gws_rd=ssl (1)

But the element "mib" should be on the site. Using a desktop browser (chrome with mobile simulation) everything is working fine. I have no idea, whats going wrong here.

Thanks for hints!

Edit: I got some progress. Regarding this site, I also need setDomStorageEnabled(true). No I can find the DOM object and set the value, but instead of showing the modified site I get a new blank one with only the value I set. E.g. a white blank site with the text "aaa".

Answer 1

Another work around that seems to work: make sure you javascript "returns" null, ex:

loadUrl("javascript:document.getElementById('myfield').value = 'aaa'; null");

Oddly however, if you aren't using getElementById then it's OK for loadUrl to return values, the same behavior doesn't occur. Smells like some kind of bug...it might be this bug but possibly not fixed in some versions of android [?]

Answer 2

I also struggled with this issue for quite some time. I had the same issue with the blank page as @Catscratch and nothing worked. Strangely enough, if you wrap the same code in a Javascript function, it all works.

Thus,

 webView.loadUrl("javascript:(function() { document.getElementById('email_field').value = '" + email + "'; })()");

works, while

webView.loadUrl("javascript:document.getElementById('email_field').value = '" + email + "';");

does not work.

And all of this without needing setDomStorageEnabled(true) and without setWebChromeClient()

Answer 3

Finally I found a solution! And it is a really strange behaviour.

First of all you need to specify setDomStorageEnabled(true) on your webview. Otherwise the DOM doesn't work. I wonder why no tutorial gave a hint about. But ok.

myview.getSettings().setDomStorageEnabled(true);

After this I ended up in a white blank page with only the value I set. The strange thing is, that javascript:document.getElementById('myfield').value = 'aaa'; returns a value. Namely the one I set. So a new blank page was created that only contains the string "aaa".

I solved it by modifying the javascript to throw away the return result:

javascript:var x = document.getElementById('myfield').value = 'aaa';

And voilá. It is working.