Thursday, October 20, 2011

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

The last exercise "Run Android Java code from Webpage" show how to call from WebView JavaScript to Android activity. Here will show how to call in reverse direction: Call JavaScript inside WebView from Android activity, with parameter passed.

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

/assets/mypage.html
<!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>
<p id="mytext">Hello!</p>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<input type="button" value="Open Dialog" onClick="openAndroidDialog()" />
<script language="javascript">
   function showAndroidToast(toast) {
       AndroidFunction.showToast(toast);
   }

   function openAndroidDialog() {
       AndroidFunction.openAndroidDialog();
   }
  
   function callFromActivity(msg){
 document.getElementById("mytext").innerHTML = msg;
   }
</script>

</body>
</html>


main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<TextView 
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="@string/hello"
   />
<EditText
   android:id="@+id/msg"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content" />
<Button
 android:id="@+id/sendmsg"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Msg to JavaScript"
   />
<WebView
   android:id="@+id/mybrowser"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
  />
</LinearLayout>


main code:
package com.exercise.AndroidHTML;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class AndroidHTMLActivity extends Activity {
 
 WebView myBrowser;
 EditText Msg;
 Button btnSendMsg;
 
 /** 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);
      
       final MyJavaScriptInterface myJavaScriptInterface
        = new MyJavaScriptInterface(this);
       myBrowser.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
      
       myBrowser.getSettings().setJavaScriptEnabled(true); 
       myBrowser.loadUrl("file:///android_asset/mypage.html");
      
       Msg = (EditText)findViewById(R.id.msg);
    btnSendMsg = (Button)findViewById(R.id.sendmsg);
    btnSendMsg.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    String msgToSend = Msg.getText().toString();
    myBrowser.loadUrl("javascript:callFromActivity(\""+msgToSend+"\")");
    
   }});

   }
  
 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 the files.

Updated: Read the updated example with @JavascriptInterface.


13 comments:

Rajesh said...

if URL like this
file:///android_asset/mypage.html?para=1

that time it is not working .
How to solve this problem help me

Anonymous said...

why do we need to surround the variable msgToSend within quotes??

Andr.oid Eric said...

After to remove java's ", the parameter passed to myBrowser.loadUrl() become javascript:callFromActivity("msgToSend").

So "msgToSend" is passed to javascript:callFromActivity() as a String.

Anonymous said...

Good tutorial... Will try to do something crazy with this. i really appreciate you..!!

Regards,
Amith Nagraj

Anonymous said...

Thank you!

Anonymous said...

Very nice demo. FYI, as of API 17, be sure to mark your JS interface's methods with @JavascriptInterface so they are visible.

Anonymous said...

great explanation great help this will be in my project. thnx man.

Anonymous said...

thanks for your valuable information

Anuprita Kasbekar said...

Hey hi ,
This program is really nice but i tried many times but sorry not working dont no wht is a problem.
I an trying to create html file and js file plz help me

Andr.oid Eric said...

hello Anuprita Kasbekar,

Are u cannot run Java code from Javascript? Have to add @JavascriptInterface in your Java methods?

Please read updated post: Calling between Android Java methods and WebView JavaScript, with @JavascriptInterface.

Abhi123 said...

Hello Eric,
it was something i was searching for
...nice post .i want something exactly opposite to this..i want to get some result thro php..i want to pass this result(simply can be id or name through query) as jscript variable and then want to show this result on android screen using android Dialog...i tried but unsuccessful...Please help me..

Andr.oid Eric said...

hello Abhi123,

please check it: Calling between Android Java methods and WebView JavaScript, with @JavascriptInterface.

Sergi said...

Very easy to follow example, and to the point. Thank you!

Could you please improve it by giving us an example of how to return error code from JavaScript to Java/Android?