Original articles, reproduced please specify http://blog.csdn.net/leejizhou/article/details/50894531 Li Zizhou Blog
In Android development, more and more commercial projects are using Android native controls to mix with WebView, not just to show a webview, but sometimes to interact with JavaScript in HTML, Android also has a good encapsulation of the interaction, so it's easy to implement such as: Click on the page button Android Call Native dialog box, click the phone number in the page call Android dialing app. This article shows you how to achieve Android and html+js interaction.
Some people may not understand what JavaScript is, and it's easy to understand that it works in HTML almost as much as you write a function (method) in Java.
This article mainly realizes the function point:
Implementation of Android Call JS script is very simple, direct WebView call Loadurl method, Inside is the method name JS, and can pass in parameters, Javascript:xxx () method name needs and JS method name the same
contentWebView.loadUrl("javascript:javacalljs()");
HTML code
Implement JS call Android method, need to add the following sentence in Java code, WebView binding Javascriptinterface,js script through this interface to invoke Java code, the first parameter is a custom class object, mapped to JS object, Here I direct this, the second parameter is an alias, JS script through this alias to call the Java method, this alias is corresponding to the HTML code.
contentWebView.addJavascriptInterface(MainActivity.this,"android");
HTML code
First look at the top is 2 native button View below is a webview
Here are the specific implementation steps:
First build an HTML file, very simple, there are mainly two buttons, two JS method
<html><head><meta http-equiv="Content-type" Content="text/html;charset=gb2312 "><script type="Text/javascript"> function javacalljs(){ document.getElementById ("Content"). InnerHTML = "<br\>java called the parameterless function of JS"; function javacalljswith(Arg){ document.getElementById ("content" ). InnerHTML = ("<br\>"+arg);}</script></head><body>HTML content Display<br/><H1><div id="Content">Content display</div></H1><br/><input type="button"value="Click Call Java Code" OnClick="Window.android.startFunction ()" /> <br/><input type="button"value="Click Invoke Java code and pass parameters" onclick ="window.android.startFunction (' Http://blog.csdn.net/Leejizhou ')" /> </body></html>Need to put this HTML file in the Assets folder note the folder location
Add permissions
<uses-permission android:name="android.permission.INTERNET"/>
Layout 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:orientation =" vertical " tools:context =; <textview android:layout _width = "wrap_content" android:layout_height = "wrap_content" android:text = "Android" /> <button android:id = "@+id/button" android:layout_margin = "8DP" android:layout_width =" match_parent " android:layout_height =" wrap_content " android:text =" Call js " android:background =" @color/ Coloraccent " android:textcolor =" #ffffff "
/> <button android:id = "@+id/button2" android:layout_margin = "8DP" android:layout_width = "match_parent" android:layout_height =" wrap_content " android:text =" Call the parameter JS " android:background =" @color/ Coloraccent " android:textcolor =" #ffffff "
/> <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="WebView"android:layout_margintop="8DP" /> <WebViewandroid:id="@+id/webview"android:layout_width= "Match_parent" android:layout_height="match_parent" /> </linearlayout>Activity's Java class
Public class mainactivity extends appcompatactivity { PrivateWebView Contentwebview;@Override protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate); Setcontentview (R.layout.activity_main); Contentwebview = (WebView) Findviewbyid (R.id.webview);//Enable JavaScriptContentwebview.getsettings (). setjavascriptenabled (true);//Load HTML from the assets directoryContentwebview.loadurl ("File:///android_asset/web.html"); Contentwebview.addjavascriptinterface (mainactivity. This,"Android");//button button without parameter call HTML JS methodFindviewbyid (R.id.button). Setonclicklistener (NewView.onclicklistener () {@Override Public void OnClick(View v) {//parameter-free method of invoking JSContentwebview.loadurl ("Javascript:javacalljs ()"); } });//button button called HTML JS methodFindviewbyid (R.id.button2). Setonclicklistener (NewView.onclicklistener () {@Override Public void OnClick(View v) {//Pass parameter call JS methodContentwebview.loadurl ("Javascript:javacalljswith ("+"' Http://blog.csdn.net/Leejizhou '"+")"); } }); }//For security reasons targetsdkversion>=17 need to add @JavascriptInterface //js calls the Android Java method name and the name corresponding to the alias after the button onclick in HTML @JavascriptInterface Public void startfunction() {Runonuithread (NewRunnable () {@Override Public void Run() {Toast.maketext (mainactivity. This,"Show", the). Show (); } }); }@JavascriptInterface Public void startfunction(FinalString text) {Runonuithread (NewRunnable () {@Override Public void Run() {NewAlertdialog.builder (mainactivity. This). Setmessage (text). Show (); } }); }}Ok such a simple Android and html+js interaction is complete, there is any problem can also leave a message below.
SOURCE http://download.csdn.net/download/leejizhou/9461804
Getting Started with Android and Html+js interaction
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
