Getting started with interaction between Android and HTML + JS

Getting started with interaction between Android and HTML + JS

In Android development, more and more commercial projects use the Android native control and WebView for hybrid development. Of course, it is not just as simple as displaying a WebView, sometimes you need local Java code to interact with javascript in HTML, and Android also well encapsulates the interaction, so it is easy to implement, for example, click the button in the webpage, Android calls the native dialog box, click the phone number on the page to call the Android dialing APP. This article describes how to implement interaction between Android and HTML + JS.

Some people may not understand what javascript is. It can be simply understood that its role in HTML is equivalent to the function (method) You write in java.

The main functions of this article are as follows:

Android calls the javascript script in HTML calls the Android local code Android calls the javascript script in HTML and passes the javascript script in the parameter HTML calls the Android local code and passes the Parameter

It is very simple to call the JS script for Android. Webview calls the loadUrl method directly, which contains the JS method name and can pass in parameters, javascript: xxx () the method name must be the same as the JS method name.

 contentWebView.loadUrl("javascript：javacalljs()");

HTML code
Authorization/2sC0tffTw2phdmG0 + authorization/crH19S2qNLlwOC21M/authorization/OjrNXiwO/authorization + DQo8cHJlIGNsYXNzPQ = "brush: java;"> contentWebView.addJavascriptInterface(MainActivity.this,"android");

HTML code

First, there are two native Button views. Below is a WebView.

The specific implementation steps are as follows:

Create an HTML file first, which is very simple. There are mainly two buttons and two JS methods.

<Script type = "text/javascript"> function javacalljs () {document. getElementById ("content"). innerHTML =" JAVA calls the JS parameter-free function ";} function javacalljswith (arg) {document. getElementById (" content "). innerHTML = (" "+ Arg) ;}</script> HTML content display
  Content display



Put this HTML file in the assets folder and pay attention to the folder location.

Add permission

Layout File

Java class of Activity

Public class MainActivity extends AppCompatActivity {private WebView contentWebView; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); contentWebView = (WebView) findViewById (R. id. webview); // enables javascript contentWebView. getSettings (). setJavaScriptEnabled (true); // load html contentWebView from the assets Directory. loadUrl ("file: // android_asset/web.html"); contentWebView. addJavascriptInterface (MainActivity. this, "android"); // The Button does not call the findViewById (R. id. button ). setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// The method contentWebView of JS is called without parameters. loadUrl ("javascript: javacalljs ()") ;}}); // the Button for calling the findViewById (R. id. button2 ). setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// call the contentWebView method of JS by passing parameters. loadUrl ("javascript: javacalljswith (" + "'HTTP: // blog.csdn.net/Leejizhou'" + ")");}});} // for security reasons, targetSdkVersion> = 17 requires @ JavascriptInterface // JS to call the Android JAVA method name. @ JavascriptInterface public void startFunction () {runOnUiThread (new Runnable () {@ Override public void run () {Toast. makeText (MainActivity. this, "show", 3000 ). show () ;}}) ;}@ JavascriptInterface public void startFunction (final String text) {runOnUiThread (new Runnable () {@ Override public void run () {new AlertDialog. builder (MainActivity. this ). setMessage (text ). show ();}});}}

OK is a simple interaction between Android and HTML + JS. If you have any questions, leave a message below.