Load a javascript method from Android Webview

Question

I am trying to render a chart in an Android WebView using HighCharts.

What my app does should be simple : - Load the HTML page and external (but local) css and js files - Load data from the Java part of the app - Call a javascript function with the previously-loaded data as a parameter

I setup my webview by activating Javascript :

mWebView.getSettings().setJavaScriptEnabled(true);

And also by setting a WebClient to catch javascript's console messages :

mWebView.setWebChromeClient(new WebChromeClient() {
        public boolean onConsoleMessage(ConsoleMessage cm) {
            Log.d(TAG, cm.message() + " -- From line "
                    + cm.lineNumber() + " of "
                    + cm.sourceId() );
            return true;
        }

    });

This is my HTML page :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Chart</title>
    <script src="jquery.js"></script>
</head>

<body>
    <script src="highstock.js"></script>
    <script src="exporting.js"></script>
    <script language="javascript">
        function plot() {
            console.log("Hello !");
        }
    </script>
    <div id="container" style="height: 100%; width: 100%"></div>
</body>
</html>

I load this page from the app's assets by calling

mWebView.loadUrl("file:///android_asset/page.html");

My external CSS file seems to be read and I suppose the external JS files are also correctly loaded

I read everywhere that I can call my javascript method anytime by calling

mWebView.loadUrl("javascript:plot()");

However, I always get the error

Uncaught ReferenceError: plot is not defined -- From line 1 of null

Is there anything I might have forgotten ? Note that I load my page and call the javascript method right after the loadUrl call.

Thanks !

ErGo_404 · Accepted Answer · 2014-12-30T21:26:10.983

Ok, I'm sorry for your time loss. I was looking for an answer for hours, and then within 15 minutes of posting the question I found the solution.

The problem seemed to be the two consecutive calls to loadUrl. Maybe the page wasn't properly loaded yet while I was already calling the javascript function.

I added a load listener on the WebView like this

mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            if (url.equals("file:///android_asset/page.html")) {
                mWebView.loadUrl("javascript:plot();");
            }
        }
    });

so that I call the javascript method only when the page is completely loaded. Now it works properly on every call.

Thank you again for your attention !

The consecutive calls to loadUrl cause a race condition. The problem is that loadUrl("file://..") doesn't complete immediately and so when you call loadUrl("javascript:..") it will sometimes execute before the page has loaded (so it will effectively execute in "about:blank" context) causing errors. — marcin.kosiba, Jan 05 '15 at 10:14

score 2 · Answer 2 · edited May 23 '17 at 12:23

Try this:

<body>
    <script src="highstock.js"></script>
    <script src="exporting.js"></script>
    <script language="javascript">
        function plot() {
            console.log("Hello !");
        }

      plot(); //Note the calling of the function within the HTML file once loaded into webView
    </script>
    <div id="container" style="height: 100%; width: 100%"></div>
</body>

And remove the line:

mWebView.loadUrl("javascript:plot()");

If you want to pass data to your javascript function, hen send your data through the URL like this:

mWebView.loadUrl("file:///android_asset/page.html?data=something");

and use:

var param1var = getQueryVariable("data");
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  alert('Query Variable ' + variable + ' not found');
}

in your JavaScript like what is done here. You can also check out this example.

This does indeed work. However, I am going to add parameters to my plot() call, and those parameters will come from my Java code, so I would rather keep my loadUrl() call. Or is there another way ? — ErGo_404, Dec 30 '14 at 17:49
This should actually work but it would reload the page everytime I refresh the data. I am planning to use a quite heavy chart library, so I would rather avoid reloading it every time I add a single data to plot. Still, thank you for this method, it might help me later on another page. — ErGo_404, Dec 30 '14 at 18:08

Load a javascript method from Android Webview

2 Answers2