android + javascript 相互通訊實例分析

關鍵點：
正向通信（js調用Android方法）
1.在Android程序中爲WebView控件增長一個與JS的暗號，demo。如WebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
2.在Android程序中的定義一個支持js調用的方法，須要經過註解標誌@JavascriptInterface。如　@JavascriptInterface public void clickOnAndroid() {}
3.在WebView打開的網頁js中按照暗號要求，定義一個js方法，window.demo.clickOnAndroid()
以上3點完成js調用android的程序

逆向通信（android調用js方法）
1.在js定義一個方法，function wave(){}
2.在Android程序中調用js方法mWebView.loadUrl("javascript:wave()");

Android與js通信原理：
1.在Android中定義各類支持請求的監聽服務和業務實現，用於接收到js請求，生成Android的Intent對象，而且廣播出去，監聽服務收到這個廣播開始作事情
2.在Android中定義一個專門處理js請求的類，類中的方法須要經過@JavascriptInterface 註解標誌（至關於用java代碼寫js代碼）
3.把這個能夠處理js請求的java類註冊到Android中的WebView控件中，而且須要寫一個實例名字（這個實例名字是與js的通訊約定）
4.在js中經過實例名稱直接調用Android的方法

 

實例分析：

1.  AndroidManifest.xml中必須使用許可 "android.permission.INTERNET", 不然會出Web page not available錯誤。

<uses-permission android:name="android.permission.INTERNET"/>

2.  若是訪問的頁面中有Javascript，則webview必須設置支持Javascript。

1 　　WebSettings webSetting = webview.getSettings();
2 　　webSetting.setJavaScriptEnabled(true);

3.若是頁面中連接，若是但願點擊連接繼續在當前browser中響應，而不是新開Android的系統browser中響應該連接，必須覆蓋 webview的WebViewClient對象或者覆蓋webview的 setWebChromeClient

1 mWebView.setWebViewClient(new WebViewClient(){
2 public boolean shouldOverrideUrlLoading(WebView view, String url) { 
3　　　　　view.loadUrl(url); 
4　　　　 return true; 
5　　　　}
6  });

 

 1   mWebView.setWebChromeClient(new MyWebChromeClient(）
 2             @Override
 3             public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
 4                 Log.d(LOG_TAG, message);
 5                 result.confirm();
 6                 return true;
7             });

 

4.  若是不作任何處理，瀏覽網頁，點擊系統「Back」鍵，整個Browser會調用finish()而結束自身，若是但願瀏覽的網 頁回退而不是推出瀏覽器，須要在當前Activity中處理並消費掉該Back事件。

1 public boolean onKeyDown(int keyCode, KeyEvent event) { 
2 　　if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { 
3 　　　　mWebView.goBack(); 
4 　　　　return true; 
5 　　} 
6 　　return super.onKeyDown(keyCode, event); 
7 }

 

 5.  javascript對象 與 android 對象綁定

WebView注入Java對象

　　對象注入即經過webview 創建 javascript對象 與 android 原生對象的綁定關係，下面代碼中，obj1對象在android程序中能夠操做，obj2在js程序中能夠操做，二者操做的均爲同一個內存對象，便可以理解爲，兩個綁定的對象是同一個對象在不一樣運行環境下的一個別名(僅我的理解，有誤請大牛指正)

1 webview.getSetting().setJavaScriptEnable(true);  
2 class JsObject {  
3  @JavascriptInterface  4     public String toString() { return "injectedObject"; }  
5  }  
6  webView.addJavascriptInterface(new JsObject()obj1, "injectedObject"obj2);

　　上面的程序創建 javascript 與android 程序的綁定關係，android 4.2 以後版本提供給js調用的函數必須帶有註釋語句@JavascriptInterface ，4.2版本以前向webview注入的對象所暴露的接口不是必須帶有@JavascriptInterface註釋語句(須要注意，android adt，eclipse生成的工程，低版本中會自動帶有 anotations.jar，支持@JavascriptInterface, 而高版本中工程中，不會自動帶有anotations.jar包，因此要加入註釋語句@JavascriptInterface，首先要本身手動加入anotations.jar包，不要忘記import 哦！本人就犯過這麼低級的錯誤哦)

 　　官方文檔解釋是由於這個接口容許JavaScript 控制宿主應用程序，這是個很強大的特性，但同時，在4.2的版本前存在重大安全隱患，由於JavaScript 能夠使用反射訪問注入webview的java對象的public fields，在一個包含不信任內容的WebView中使用這個方法，會容許攻擊者去篡改宿主應用程序，使用宿主應用程序的權限執行java代碼。所以4.2之後，任何爲JS暴露的接口，都須要加 @JavascriptInterface 註釋，這樣，這個Java對象的fields 將不容許被JS訪問。[2] 

 　　注：若是將targetSdkVersion 設置爲17或者更高，但卻沒有給暴露的js接口加@JavascriptInterface註釋，則logcat會報以下輸出：

　　 Console: Uncaught TypeError: Object [object Object] has no method 'toString'

　　(須要特注意的一點，這裏的限制是經過 targetSdkVersion 爲標準，即若是工程採用了android sdk的版本是4.2以上，可是 targetSdkVersion 的版本在17之下，那麼該狀態下生成的應用，不過報錯，若是targetSdkVersion 設置爲>=17 就須要特別主意，要加上 @JavascriptInterface註釋語句了， 全部建議在各類版本下都採用@JavascriptInterface註釋，就萬無一失了)

 

6.  在作webview開發是常常會加載本機的html文件以下：

　file:///android_asset/teste.html   加載項目assets下的文件teste.html

　file:///sdcard/index.html       加載sdcard下的index.html文件

 

源代碼：

android

 1   　　 private WebView mWebView;
 2       private Handler mHandler = new Handler();
 3       
 4       @Override
 5       protected void onCreate(Bundle savedInstanceState) {
 6           super.onCreate(savedInstanceState);
 7          setContentView(R.layout.main);
 8          mWebView = (WebView) findViewById(R.id.webview);
 9 
10          WebSettings webSettings = mWebView.getSettings();
11          webSettings.setJavaScriptEnabled(true);
12          webSettings.setSavePassword(false);
13          webSettings.setSaveFormData(false);
14          webSettings.setSupportZoom(false);
15  
16          mWebView.setWebChromeClient(new MyWebChromeClient());
17          mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
18  //      mWebView.loadUrl("http://www.baidu.com/");
19          mWebView.loadUrl("file:///android_asset/demo.html");
20      }
21      
22       final class DemoJavaScriptInterface {
23              DemoJavaScriptInterface() {
24                  Log.i("aaaa", "create DemoJavaScriptInterface");
25              }
26              /**
27               * This is not called on the UI thread. Post a runnable to invoke
28               * loadUrl on the UI thread.
29               */
30 　　　　　　　　@JavascriptInterface 31              public void clickOnAndroid() {
32                 mHandler.post(new Runnable() {
33                     public void run() {
34                          mWebView.loadUrl("javascript:wave()");
35                      }
36                  });
37              }
38          }
39          /**
40          * Provides a hook for calling "alert" from javascript. Useful for
41           * debugging your javascript.
42           */
43         final class MyWebChromeClient extends WebChromeClient {
44             @Override
45              public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
46                 result.confirm();
47                 return true;
48             }
49         }

 

html源文件

 1 <!DOCTYPE html>
 2 <html>
 3     <script language="javascript">
 4         /* This function is invoked by the activity */
 5         function wave() {
 6             alert("1");
 7             document.getElementById("droid").src="android_waving.png";
 8             alert("2");
 9         }
10     </script>
11     <body>
12         <!-- Calls into the javascript interface for the activity -->
13         <a onClick="window.demo.clickOnAndroid()">
14         <div style="width:80px;
15             margin:0px auto;
16             padding:10px;
17             text-align:center;
18             border:2px solid #202020;" >
19                 <img id="droid" src="android_normal.png"/><br>
20                 Click me!
21         </div></a>
22     </body>
23 </html>