Home > Developer > JavaScript
With WebView, you can create interfaces between JavaScript code and the client's Android code. For example, Android can get input from JavaScript. To bind a new interface between your JavaScript and the Android code, you need to call Addjavascriptinterface (), pass it a class instance to bind to JavaScript, and you need an interface name so that JavaScript can call In order to access the class. Here is a simple example;
HTML file:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8″/>
<meta name= "Viewport"
Content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "viewport" content= "target-densitydpi=device-dpi"/>
<script type= "Text/javascript" >
function init ()
{
var testval = document.getElementById (' Mytextid '). Value;
Androidfunction.showtoast (TestVal);
}
</script>
<body>
<div style= "float:left;width:50%;" >
<input type= "text" style= "width:180px;"
Name= "MyText" id= "Mytextid"/>
</div>
<div style= "CLEAR:BOTH;HEIGHT:3PX;" ></div>
<div>
<input value= "Submit" type= "button" name= "Submit"
Id= "btnsubmit" onclick= "Javascript:return init ();" />
</div>
</body>
Android Layout XML file:
<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Xmlns:tools= "Http://schemas.android.com/tools"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
Android:fitssystemwindows= "true"
tools:context= "Com.example.zmit.webview.MainActivity" ></pre>
<pre> <webview
Android:id= "@+id/wv1"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:layout_weight= "0.5"
/>
<linearlayout
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
android:orientation= "Vertical"
android:layout_weight= "1" >
<textview
Android:id= "@+id/textview1"
Android:layout_width= "Wrap_content"
android:layout_height= "Match_parent"
Android:textappearance= "Android:attr/textappearancelarge"/>
</LinearLayout></pre>
<pre></LinearLayout>
Code:
public class Mainactivity extends Appcompatactivity {
WebView Wview;
Private TextView Mytextview;
Final Handler MyHandler = new Handler ();
@Override
protected void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.activity_main);
Wview = (webview) Findviewbyid (R.ID.WV1);
Mytextview = (TextView) Findviewbyid (R.ID.TEXTVIEW1);
Final Javascriptinterface Myjavascriptinterface
= new Javascriptinterface (this);//Interactive interface
Wview.getsettings (). Setjavascriptenabled (True);
Wview.addjavascriptinterface (Myjavascriptinterface, "androidfunction");
Wview.loadurl ("file:///android_asset/untitled.html");
}
public class Javascriptinterface {
Context Mcontext;
Javascriptinterface (context C) {
Mcontext = C;
}
@JavascriptInterface
public void Showtoast (String webmessage) {
Final String msgetoast = webmessage;
Myhandler.post (New Runnable () {
@Override
public void Run () {
Mytextview.settext (Msgetoast);
}
});
Toast.maketext (Mcontext, Webmessage, Toast.length_short). Show ();
}
}
}
The effect looks like this
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
