Simple interactive use of Android and HTML

Source: Internet
Author: User

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

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: 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.