三月 282014
最近的一個 app 需要讓 Android 可以呼叫 WebView 中的 Javascript,並且按下 WebView 中的按鈕時,也可以呼叫 Android 內部的方法,這篇文章記錄一下大概的做法,免得下次遇到又忘記 …
這個 app 需要做到的功能很簡單,在 Android 端希望可以點選「字體放大」、「字體縮小」的按鈕來呼叫 WebView 中的 Javascript;並且點選 WebView 中的行事曆按鈕後,可以開啟 Android 內建的 Google 行事曆。
透過 Android 本身的按鈕來達到呼叫 Javascript 的功能很簡單,以小蛙的例子是用 fragment 中放置一個 WebView
上面的程式碼只寫出個大概,取得 WebView 後設定支援 Javascript,並且設定按鈕來執行 Javascript,上面例子小蛙 WebView 中有一個字體放大的 Javascript 叫做 fontSize(‘+’),因此直接使用 wv.loadUrl(‘要呼叫的 Javascript’); 即可!
這個部分就比較複雜一些些,首先必須先建立一個 JavascriptInterface 物件,設定好要執行的相對應功能。例如: 這邊要注意的是如果 targetSdkVersion 設定為 17 以上,就必須在每個可以被 Javascript 呼叫的方法前面加上 @JavascriptInterface,否則會出現以下錯誤 將設定好的 JavaScriptInterface 設定給 WebView 物件 後面的參數名字可以自己取,小蛙這邊使用 JSInterface,這個名字是讓 Javascript 可以知道透過哪個物件來呼叫。Android 這邊完成後接著在 html 中加入相對應的動作,例如: 設定一個 button 讓使用者點選時執行 function showToast(),而 showToast 方法中倘若存在 JSInterface 物件 (這個物件是上面 wv.addJavascriptInterface 時設定的),就執行 JSInterface.showToast() 的方法 (這一步就會對應到我們自訂的 JavaScriptInterface 類別中的 public void showToast()),在 app 中顯示 Toast 訊息。 到這邊,從 Android 呼叫 Javascript 以及從 Javascript 呼叫 Android 方法都已經完成,但是在 Android 2.3.x 版本中會發生一些錯誤,造成當機無法正確執行,解決方法請參考 Android 2.3 @JavascriptInterface Issue @ 蛙齋。
|
|