2013/05/02

WebView 與 javascript 使用


之前講過怎麼簡單的使用 webview,
這邊也稍微紀錄一下如何在 webview 與 javascript 的使用.

預設 webview 是不能使用 javascript 的, 所以在初始時必須開啟 javascript,
除此之外, 還必須設定 web chrome client, 否則在我的範例則會無法達到效果.
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.getSettings().setJavaScriptEnabled(true);

我所使用的 html 檔案, 點擊按鈕會跳出一個訊息視窗
<!DOCTYPE html>
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Example</title>
        <meta name="viewport" content="user-scalable=yes,target-densityDpi=device-dpi,width=device-width" />
  <script type='text/javascript'> 
   function showMsg() {
    alert('This is alert dialog');
   }
  </script>
    </head>
 <body>
  <input type='button' value='Click Me' onclick='showMsg();'/>
 </body>
</html>

效果如下:


在 Webview 內使用 javascript 就是這麼簡單.

OK ! 接著如果要從 android 呼叫 html 裡的 javascript 呢?
只要使用以下方式就可以呼叫 html 裡的 javscript.
mWebView.loadUrl("javasript:showMsg();");
效果跟上圖一樣, 也是會跳出一個訊息視窗.

反過來, 可以從 html 呼叫 android 的 java 函式嗎 ?
可以, 一樣是透過 javascript 的方式!


建立一個 class, 並且使用 WebView 的 addJavascriptInterface 來使用這個 class
此範例在使用者點擊 Html 裡的按鈕, 則會呼叫 android 的 toast 顯示訊息.
class JsObject {
  
  @JavascriptInterface
  public void toast() {
   Toast.makeText(MainActivity.this, R.string.msg_js_call_toast, Toast.LENGTH_SHORT).show();
  }
 }

mWebView.addJavascriptInterface(new JsObject(), "myjsobject");
myjsobject 可隨便命名, 這是之後我們在 html 裡會用到的名稱.

因為要使用 android 的函式, 所以 html 檔修改如下.
<!DOCTYPE html>
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Example</title>
        <meta name="viewport" content="user-scalable=yes,target-densityDpi=device-dpi,width=device-width" />
  <script type='text/javascript'> 
   function showMsg() {
    Window.myjsobject.toast();
   }
  </script>
    </head>
 <body>
  <input type='button' value='Click Me' onclick='showMsg();' />
 </body>
</html>


效果如下:


這邊要特別注意的是, 如果在某些 2.3.x 版本, 只要一點擊就會直接關閉, 這是由於 2.3.x WebView 版本的問題 !!
基本上可以直接說在 2.3.x 版本不能使用 javascript interface !!
不過辦法是人想出來的, 解決方式會在這篇提到


範例原始檔: WebViewExample4

參考資料:
[1]. 怎麼使用 android 的 webview