Android Calling JavaScript functions in WebView

I am trying to call some javascript functions sitting in an html page running inside an android webview. Pretty simple what the code tries to do below - from the android app, call a javascript function with a test message, which inturn calls a java function back in the android app that displays test message via toast.

The javascript function looks like:

function testEcho(message){ window.JSInterface.doEchoTest(message); }

From the WebView, I have tried calling the javascript the following ways with no luck:

myWebView.loadUrl("javascript:testEcho(Hello World!)"); mWebView.loadUrl("javascript:(function () { " + "testEcho(Hello World!);" + "})()");

I did enable javascript on the WebView

myWebView.getSettings().setJavaScriptEnabled(true); // register class containing methods to be exposed to JavaScript myWebView.addJavascriptInterface(myJSInterface, "JSInterface");

And heres the Java Class

public class JSInterface{ private WebView mAppView; public JSInterface (WebView appView) { this.mAppView = appView; } public void doEchoTest(String echo){ Toast toast = Toast.makeText(mAppView.getContext(), echo, Toast.LENGTH_SHORT); toast.show(); } }

I've spent a lot of time googling around to see what I may be doing wrong. All examples I have found use this approach. Does anyone see something wrong here?

Edit: There are several other external javascript files being referenced & used in the html, could they be the issue?

-------------Problems Reply------------

I figured out what the issue was : missing quotes in the testEcho() parameter. This is how I got the call to work:

myWebView.loadUrl("javascript:testEcho('Hello World!')");

public void run(final String scriptSrc) {
webView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:" + scriptSrc);
}
});
}

Yes you have the syntax error. If you want to get your Javascript errors and printing statements in your logcat you must implement the onConsoleMessage(ConsoleMessage cm) in your WebChromeClient. It gives the complete stack traces like Web console(Inspect element). Here is the method.

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

After implementation you will get your Javascript errors and print statements*(console.log)* on your logcat.

I created a nice wrapper to call JavaScript methods, it also show javascript errors in log:

private void callJavaScript(String methodName, Object...params){
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("javascript:try{");
stringBuilder.append(methodName);
stringBuilder.append("(");
for (Object param : params) {
if(param instanceof String){
stringBuilder.append("'");
stringBuilder.append(param);
stringBuilder.append("'");
}
stringBuilder.append(",");
}
stringBuilder.append(")}catch(error){Android.onError(error.message);}");
webView.loadUrl(stringBuilder.toString());
}

You need to add this too:

private class WebViewInterface{

@JavascriptInterface
public void onError(String error){
throw new IllegalArgumentException(error);
}
}

And add this interface to your webview

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebViewInterface(), "AndroidErrorReporter");

This video (http://youtu.be/uVqp1zcMfbE) gave me the hint to make it work. The key is to save your HTML and JS files in the Android assets folder. Then you can easily access them via:

webView.loadUrl("file:///android_asset/your_page.html");

Category:javascript Views:3 Time:2010-12-01

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.115 (s). 11 q(s)