安卓與HTML簡單的交互使用

                                          安卓與HTML簡單的交互使用

 實現經過java代碼與HTML的一個互相操做。

準備工做：

一、新建Android工程，在佈局文件中添加WebView控件。

二、準備一個HTML文件，放在src/main/assets文件夾下。

三、在java中獲得webview，經過loadUrl找到assets下的HTML文件，必須設置webview能使用js(settings.setJavaScriptEnabled(true))加載顯示以下效果：

 

簡單的效果實現

1、點擊HTML上sayHello按鈕，能夠獲得java代碼返回的字符串並顯示

1 mWvShow.loadUrl("file:///android_asset/jsandjava.html");
2 mWvShow.addJavascriptInterface(new JsTest(), "jsObj");//將java中類映射到js中   jsObj爲該類的一個對象名

JsTest是一個內部類，其中定義的方法與js中button調用的方法名一致。

1         @JavascriptInterface
2         public String sayHello() {
3             return "你好！！！";
4         }

js中封裝的sayHello()方法：

1    function sayHello(){
2       var str = window.jsObj.sayHello();
3       document.getElementById("id_input").value = str;
4    }

var str = window.jsObj.sayHello();

經過window獲得jsObj對象，經過其調用該類中的方法sayHello()，就可獲取java方法中返回的字符串。

在js的button點擊時調用方法：

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

 演示效果：

2、點擊HTML上showAndroidButton按鈕，能夠和activiy交互，讓其進行一些UI的操做

因對象映射過一次，不需再次映射。在java中定義showAndroidButton（）方法，一樣方法名需和js中button調用的一致，即js調用的方法就是經過映射過去的對象調用的java裏的方法，因此二者方法名必須一致。由於showAndroidButton（）是在js中經過映射的對象來調用，不能直接更新UI須要經過runOnUiThread的方法來更新UI。

1         @JavascriptInterface
2         public void showAndroidButton(){
3             runOnUiThread(new Runnable() {
4                 @Override
5                 public void run() {
6                     btn_test.setVisibility(View.VISIBLE);
7                 }
8             });
9         }

js封裝的方法：

經過對象調用類中的方法。

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

HTML中button的定義，調用showAndroidButton()方法：

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

 3、點擊excuteHtmlFun按鈕，調用java內的excuteHtmlFun()方法，方法內調用js定義的showFromHtml(param)方法；

 

java內部類中的excuteHtmlFun()方法，方法內加載Url：

1         @JavascriptInterface
2         public void excuteHtmlFun(){
3             runOnUiThread(new Runnable() {
4                 @Override
5                 public void run() {
6                     mWvShow.loadUrl("javascript: showFromHtml('我很好！')");//調用js內的showFromHtml（param）方法
7                 }
8             });
9         }

js的showFromHtml(param)方法：

 

   function showFromHtml( param ){
        document.getElementById("id_input").value = "Java call Html : " + param;
    }

 

 

button內直接調用java類中的方法

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

出現效果就是點擊按鈕調用java的方法，java方法中使用了js的方法，顯示在網頁上。