安卓與HTML簡單的交互使用

                                          安卓與HTML簡單的交互使用

 實現通過java代碼與HTML的一個互相操作。

准備工作：

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

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

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

 

簡單的效果實現

一、點擊HTML上sayHello按鈕，可以得到java代碼返回的字符串並顯示

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

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

        @JavascriptInterface
        public String sayHello() {
            return "你好！！！";
        }

js中封裝的sayHello()方法：

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

var str = window.jsObj.sayHello();

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

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

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

 演示效果：

二、點擊HTML上showAndroidButton按鈕，可以和activiy交互，讓其進行一些UI的操作

因對象映射過一次，不需再次映射。在java中定義showAndroidButton（）方法，同樣方法名需和js中button調用的一致，即js調用的方法就是通過映射過去的對象調用的java里的方法，所以兩者方法名必須一致。因為showAndroidButton（）是在js中通過映射的對象來調用，不能直接更新UI需要通過runOnUiThread的方法來更新UI。

        @JavascriptInterface
        public void showAndroidButton(){
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    btn_test.setVisibility(View.VISIBLE);
                }
            });
        }

js封裝的方法：

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

   function showAndroidButton(){
       window.jsObj.showAndroidButton();
   }

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

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

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

 

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

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

js的showFromHtml(param)方法：

 

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

 

 

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

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

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