CODEWITHSUNDEEP
javascriptandroidandroid-webview
ErGo_404
ErGo_404

Reputation: 1811

Load a javascript method from Android Webview

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 !

Upvotes: 2

Views: 14856

Answers (2)

ErGo_404
ErGo_404

Reputation: 1811

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 !

Upvotes: 4

Mr. Concolato
Mr. Concolato

Reputation: 2230

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.

Upvotes: 2

Related Questions