First, the web-side, this is some simple tag language and JS function:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd";
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8";
<title >h5 and Android</title>
<script>
//define local method effect provided to the Android side call will get the parameter value
function callH5 (data) {
document.getElementById ("result"). Innerhtml= "Result success for Android to:" +data;
}
//define local Click event Effect call Android method pass parameter to Android client side
Function Myonclick () {
document.getElementById ("Re Sult "). Innerhtml=" button was clicked "
//Call Android Local method call object is instantiated by Android definition, call method provided by Android (specific object name and method to be determined, changeable)
Myobj.callandroid ("Popup window shows callback succeeded ~ ~ ~");
}
</script>
<body>
<button id= "button" onclick= "Myonclick ()" > Click Call Android Method </button>
<p/>
<div id= "result" > Effect display </div>
</body>
</ Html>
Second, the next step is to load the Web page in Android, and set to complete the interaction, directly on the code, there are detailed comments:
Package com.lvyerose.h5andandroid;
Import Android.annotation.SuppressLint;
Import Android.os.Bundle;
Import android.support.v7.app.AppCompatActivity;
Import Android.support.v7.widget.Toolbar;
Import Android.view.View;
Import Android.webkit.JavascriptInterface;
Import Android.webkit.WebView;
Import Android.widget.Toast;
public class Mainactivity extends Appcompatactivity {
Private WebView Mwebview;
public void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.activity_main);
Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar);
Setsupportactionbar (toolbar);
Mwebview = (WebView) Findviewbyid (R.id.webview);
Initweb ();
}
@SuppressLint ({"Javascriptinterface", "setjavascriptenabled"})
void Initweb () {
Set encoding
Mwebview.getsettings (). Setdefaulttextencodingname ("Utf-8");
Support JS
Mwebview.getsettings (). Setjavascriptenabled (True);
Set local call objects and their interfaces
The first argument is to instantiate the custom interface object The second parameter is the object name that is used to provide the JS-side call
Mwebview.addjavascriptinterface (New Contact () {
@JavascriptInterface//annotations that must be added
@Override
public void callandroid (String phone) {
Toast.maketext (mainactivity.this, Phone, Toast.length_long). Show ();
}
}, "MYOBJ");
Loading JS
Mwebview.loadurl ("http://lvyerose.com/h5andAndroid.html");
Findviewbyid (R.id.button). Setonclicklistener (New View.onclicklistener () {
@Override
public void OnClick (View v) {
Android calls the JS method, where the parameters ' Android OK!!! ' can pass in the variable effect as follows:
Mwebview.loadurl ("Javascript:callh5 ('" +str+ ")");
Mwebview.loadurl ("Javascript:callh5 (' Android OK!!! ')");
}
});
}
Defines the interface, which is provided to the JS call
Interface Contact {
@JavascriptInterface
void Callandroid (String phone);
}
}
Android native code interacts with HTML5