Simple interactive use of Android and HTML

Simple Interactive use of Android and HTML

Implementation through the Java code with the HTML of one another operation.

Preparatory work:

1. Create a new Android project and add the WebView control to the layout file.

2. Prepare an HTML file to be placed under the Src/main/assets folder.

3, in Java get WebView, through Loadurl find assets under the HTML file, must be set WebView can use JS (settings.setjavascriptenabled (TRUE)) load display the following effect:

Simple effect implementation

First, click on the SayHello button on the HTML to get the string returned by the Java code and display

1 mwvshow.loadurl ("file:///android_asset/jsandjava.html"); 2 mwvshow.addjavascriptinterface (new jstest (), "jsobj");//Map A class in Java to JS   jsobj an object name for the class

Jstest is an internal class in which the method defined is consistent with the method name invoked by the button in JS.

1         @JavascriptInterface 2          Public String SayHello () {3             return "Hello!!!" "; 4         }

JS in the encapsulated SayHello () method:

1   function SayHello () {2       var str = Window.jsObj.sayHello (); 3       document.getElementById ("Id_input"). Value = str; 4    }

var str = Window.jsObj.sayHello ();

The jsobj object is obtained through window, and the string returned in the Java method is obtained by invoking the method SayHello ()in the class.

The method is called when the JS button is clicked:

1 <  type= "button"  value= "SayHello"  onclick= "SayHello ()"  />

Demo Effect:

Second, click on the HTML showandroidbutton button, you can interact with Activiy, let it do some UI operation

Because the object is mapped once, you do not need to map again. Define the Showandroidbutton () method in Java, the same method name must be consistent with the button invocation in JS, that is, the method of JS invocation is through the mapping of past objects called Java method, so the method name should be consistent. Because Showandroidbutton() is called through the mapped object in JS, it is not possible to update the UI directly by Runonuithread.

1 @JavascriptInterface2          Public voidShowandroidbutton () {3Runonuithread (NewRunnable () {4 @Override5                  Public voidrun () {6 btn_test.setvisibility (view.visible);7                 }8             });9}

JS Encapsulation Method:

Invokes a method in a class through an object.

1    function Showandroidbutton () {2       Window.jsObj.showAndroidButton (); 3    }

The definition of the button in HTML, call the Showandroidbutton () method:

<type= "button"  style= "height:40px"  value= "Showandroidbutton"  onclick= "Showandroidbutton ()"/>

Third, Click the Excutehtmlfun button, call the Java Excutehtmlfun () method, the method calls the JS definition of showfromhtml (param) method;

The Excutehtmlfun () method within the Java inner class loads the URL inside the method:

1 @JavascriptInterface2          Public voidExcutehtmlfun () {3Runonuithread (NewRunnable () {4 @Override5                  Public voidrun () {6Mwvshow.loadurl ("javascript:showfromhtml (' I'm fine! ‘)");//Invoke JS within the showfromhtml (param) method7                 }8             });9}

JS's showfromhtml (param) method:

   function showfromhtml (param) {        document.getElementById ("Id_input"). Value = "Java call Html:" + param;    }

Calling a method in a Java class directly inside a button

1 <input type= "button" style= "height:40px" value= "Excutehtmlfun" onclick= "Window.jsObj.excuteHtmlFun ()" />

The effect is to click the button call Java method, the Java method is used in the JS method, displayed on the Web page.

Simple interactive use of Android and HTML