1. 程式人生 > >Android中webview js與native方法互相呼叫

Android中webview js與native方法互相呼叫

android webview允許js與native方法互相呼叫,基本的呼叫方法不再贅述,有個比較特殊的場景,記錄一下:

已經有一個完整的h5頁面,現在要將該頁面整合到app中,但是有部分h5頁面中的邏輯需要使用本地方法實現;

如果不想修改h5,可以通過如下方法:

1 首先,在客戶端寫一段js程式碼,該js與h5中的js名稱引數一致,目的是使用本地的js程式碼覆蓋掉h5頁面中原有的程式碼;

2 客戶端注入供js呼叫的native方法;

3 在1中的js程式碼中,呼叫2中的native方法。

客戶端程式碼:

1 本地js程式碼:

String js = "function reply_click(clicked_id) {window.control.toastMessage(clicked_id)}";

2 本地navite方法

    public class JsInteration {


        @JavascriptInterface
        public void toastMessage(String message) {
            Toast.makeText(getActivity(), message, Toast.LENGTH_LONG).show();
        }
    }

3 注入本地方法,供1呼叫;

mWebView.addJavascriptInterface(new JsInteration(), "control");

h5程式碼:

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>lalala</h1>

<button id="1" onClick="reply_click(this.id)">B1</button>
       <button id="2" onClick="reply_click(this.id)">B2</button>
       <button id="3" onClick="reply_click(this.id)">B3</button>

</body>
<script type="text/javascript">
function reply_click(clicked_id)
{
    alert(clicked_id);
}
</script>
</html>