之前講過怎麼簡單的使用 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 !!
不過辦法是人想出來的, 解決方式會在這篇提到基本上可以直接說在 2.3.x 版本不能使用 javascript interface !!
範例原始檔: WebViewExample4
參考資料:
[1]. 怎麼使用 android 的 webview
沒有留言:
張貼留言