Thursday, October 20, 2011

Run Android Java code from Webpage

Using JavascriptInterface you can create interfaces between webpage's JavaScript code and Android Java code. For example, your JavaScript code can call a method in your Android code to display a Dialog, or Toast.

To bind a new interface between your JavaScript and Android code, call addJavascriptInterface(), passing it a class instance to bind to your JavaScript and an interface name that your JavaScript can call to access the class.

Caution: Using addJavascriptInterface() allows JavaScript to control your Android application. This can be a very useful feature or a dangerous security issue. When the HTML in the WebView is untrustworthy (for example, part or all of the HTML is provided by an unknown person or process), then an attacker can include HTML that executes your client-side code and possibly any code of the attacker's choosing. As such, you should not use addJavascriptInterface() unless you wrote all of the HTML and JavaScript that appears in your WebView. You should also not allow the user to navigate to other web pages that are not your own, within your WebView (instead, allow the user's default browser application to open foreign links—by default, the user's web browser opens all URL links, so be careful only if you handle page navigation as described in the following section).

Example:

Run Android Java code from Webpage

Modify from last exercise "Load local HTML webpage inside APK":

Modify /assets/mypage.html to add two button to call JavascriptInterface in Android Java code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; user-scalable=0;" />
<title>My HTML</title>
</head>
<body>
<h1>MyHTML</h1>

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
 function showAndroidToast(toast) {
     AndroidFunction.showToast(toast);
 }
</script>

<input type="button" value="Open Dialog" onClick="openAndroidDialog()" />

<script type="text/javascript">
 function openAndroidDialog() {
     AndroidFunction.openAndroidDialog();
 }
</script>

</body>
</html>


Keep using main.xml from last exercise.

Main code, to add our JavascriptInterface.
package com.exercise.AndroidHTML;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.os.Bundle;
import android.webkit.WebView;
import android.widget.Toast;

public class AndroidHTMLActivity extends Activity {

WebView myBrowser;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
     myBrowser = (WebView)findViewById(R.id.mybrowser);
     myBrowser.addJavascriptInterface(new MyJavaScriptInterface(this), "AndroidFunction");
  
     myBrowser.getSettings().setJavaScriptEnabled(true);
     myBrowser.loadUrl("file:///android_asset/mypage.html");

 }

public class MyJavaScriptInterface {
 Context mContext;

    MyJavaScriptInterface(Context c) {
        mContext = c;
    }

    public void showToast(String toast){
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
 
    public void openAndroidDialog(){
     AlertDialog.Builder myDialog
     = new AlertDialog.Builder(AndroidHTMLActivity.this);
     myDialog.setTitle("DANGER!");
     myDialog.setMessage("You can do what you want!");
     myDialog.setPositiveButton("ON", null);
     myDialog.show();
    }

}
}



download filesDownload the files.


next:
- Call JavaScript inside WebView from Android activity, with parameter passed.

Updated: Read the updated example with @JavascriptInterface.

6 comments:

  1. gottschJanuary 17, 2012 at 7:24 AM

    This comment has been removed by the author.

    ReplyDelete
  2. UnknownNovember 22, 2012 at 7:50 PM

    Thanks for this tutorial.

    ReplyDelete
  3. AnonymousApril 23, 2013 at 7:58 PM

    The "download file" link doesn't work.

    Please upload the source again.

    Thanks

    ReplyDelete
  4. ErikApril 23, 2013 at 11:23 PM

    Download link fixed.

    Thx

    ReplyDelete
  5. UnknownMay 31, 2013 at 9:54 PM

    Hi This is not work in my application error:"VM aborting"
    what is the problem plz help me

    ReplyDelete
  6. AnonymousSeptember 2, 2014 at 2:14 PM

    Thank you for your post.Awesome tutorial.

    ReplyDelete