Using Javascript bridge in android
Your methods inside WebAppInterface
class are missing the @JavascriptInterface
annotation.
Your WebAppInterface
class should be like this,
public class WebAppInterface {
Context mContext;
WebAppInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void showToast(String toast) {
}
@JavascriptInterface
public void showDialog(String dialogMsg){
}
@JavascriptInterface
public void moveToNextScreen(){
}
}
Edit
Don't forget to limit your app to API17+ when loading web content into the WebView, otherwise your App will be vulnerable to attacks. Read @Robert's comment below.
Related videos on Youtube
Comments
-
Vikrant over 1 year
Im just trying to communicate my java app with the content on the webview .
In detail , may be just showing a toast on button click ?
After searching on google and doing some research , ended up with the following code .
P.S : - Im using Android Studio , is there any external library i need to compile inorder to get things done ? or something else ?
Following is my WebviewActivity code:-
public class WebviewActivity extends AppCompatActivity { private static final String TAG = "Main"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_webview); //WebView Object WebView browser; browser=(WebView)findViewById(R.id.webView); //Enable Javascript browser.getSettings().setJavaScriptEnabled(true); //Inject WebAppInterface methods into Web page by having Interface 'Android' browser.addJavascriptInterface(new WebAppInterface(this), "Android"); browser.loadUrl("http://www.somewebsite.com/app/form.html"); } //Class to be injected in Web page public class WebAppInterface { Context mContext; /** Instantiate the interface and set the context */ WebAppInterface(Context c) { mContext = c; } /** * Show Toast Message * @param toast */ public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } /** * Show Dialog * @param dialogMsg */ public void showDialog(String dialogMsg){ AlertDialog alertDialog = new AlertDialog.Builder(mContext).create(); // Setting Dialog Title alertDialog.setTitle("JS triggered Dialog"); // Setting Dialog Message alertDialog.setMessage(dialogMsg); // Setting alert dialog icon //alertDialog.setIcon((status) ? R.drawable.success : R.drawable.fail); // Setting OK Button alertDialog.setButton("OK", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { Toast.makeText(mContext, "Dialog dismissed!", Toast.LENGTH_SHORT).show(); } }); // Showing Alert Message alertDialog.show(); } /** * Intent - Move to next screen */ public void moveToNextScreen(){ AlertDialog.Builder alertDialog = new AlertDialog.Builder(mContext); // Setting Dialog Title alertDialog.setTitle("Alert"); // Setting Dialog Message alertDialog.setMessage("Are you sure you want to leave to next screen?"); // Setting Positive "Yes" Button alertDialog.setPositiveButton("YES", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { //Move to Next screen } }); // Setting Negative "NO" Button alertDialog.setNegativeButton("NO", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // Cancel Dialog dialog.cancel(); } }); // Showing Alert Message alertDialog.show(); } } }
form.html:-
<html> <head> <style> body{ background-color: #FA5858; color:#fff; } input{ background-color: #F7D358; width: 300px; padding:10px; color: #000; } div#content{ padding:20px; background-color: #F7D358; color: #000; } </style> <script type="text/javascript"> function showAndroidToast(toastmsg) { Android.showToast(toastmsg); } function showAndroidDialog(dialogmsg) { Android.showDialog(dialogmsg); } function moveToScreenTwo() { Android.moveToNextScreen(); } </script> </head> <body> <center> <h3>Binding JavaScript code to Android code</h3> <div id="content"> //some content here </div> <div> Here are few examples: </div> <div> <input type="button" value="Make Toast" onClick="showAndroidToast('Toast made by Javascript')" /><br/> <input type="button" value="Trigger Dialog" onClick="showAndroidDialog('This dialog is triggered by Javascript ')" /><br/> <input type="button" value="Take me to Next Screen" onClick="moveToScreenTwo()" /> </div> </center> </body> </html>
I have this above code , but it is not working in android-studio , tried all posiblities so finally posted my question here .
My study for this :-
https://developer.android.com/guide/webapps/webview.html https://developer.android.com/reference/android/webkit/WebView.html http://stackoverflow.com/questions/4325639/android-calling-javascript-functions-in-webview
-
Vikrant over 7 yearsYou just saved my day ! , Silly mistake there .. working smooth ! . Thanks for helping me pal .
-
K Neeraj Lal over 7 yearsGlad I could help. Good luck :)
-
Robert over 7 years@Vikrant Don't forget to limit your app to API17+ when loading web content into the WebView, otherwise your App will be vulnerable to attacks.
-
Vikrant almost 3 yearsGlad this post helped you :)