Examples of simple interactions between Android and JavaScript

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.