Android native code interacts with HTML5

Source: Internet
Author: User
Tags define local

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

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.