WebView的Java和javascript相互调用

最近做了一个demo，利用HTML+JS+CSS做Android的客户端。了解到WebView的强大之处在于Java和javascript可以直接相互调用。重点分析一下java与javascript如何相互调用。

先看Activity的代码：

public class WebViewerActivity extends Activity {
/*
* The WebView that is placed in this Activity
*/
private WebView mWebView;
/*
* The index page uri
*/
private String contentUri = "file:///android_asset/index.html";//A
private Handler mHandler = new Handler(); //B
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CookieSyncManager.createInstance(this);
requestWindowFeature(Window.FEATURE_NO_TITLE);
mWebView = new WebView(this);
setContentView(mWebView);
WebSettings settings = mWebView.getSettings();
//settings.setAllowFileAccess(true);
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
//settings.setBuiltInZoomControls(true);
settings.setDefaultTextEncodingName("utf-8");
mWebView.addJavascriptInterface(new Object() { //C
public void exit() {
Log.i("javascript", "exit");
finish();
}
/**
*
* @param type the resource type.
* @param id the resource id.
* @return
*/
public String getContent(String type, String id) { //D
return “resource type is ” + type + “ and id is ” + id;
}, "demo");
mWebView.loadUrl(contentUri);
}
……………………………………
public void openMenu() {
mHandler.post(new Runnable() { //B
public void run() {
mWebView.loadUrl("javascript:openMenu()");
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
return true;
}
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
openMenu();
return true;
}

复制代码

上述代码有以下几点需要注意的。
1. //A为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的assets目录中寻找内容。如上面的file:///android_asse/index.html
2. //B 在java中访问javascript的方法时，要跑在其他的线程中。这边与弹出菜单栏为例。
3. //C addJavascriptInterface(Object obj,String interfaceName)方法非常关键，是java和javasript的桥梁。该方法将一个java对象绑定到一个javascript对象中。javascript对象名就是interfaceName，作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过javascript:window.demo访问到绑定的java对象了。而且javascript访问java 的方法可以带参数。本人只试过传String类型。

接着看HTML中如何调用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo index</title>
<script type="text/javascript">
function showMenuItems() //A
{
var menuDiv = document.getElementById ("menu_div");
menuDiv.innerHTML =”<b>open menu</b>”
}
</script>
</head>
<body>
<script type="text/javascript">
var data = window.demo.getContent ("music","1"); //B
document.write(“<h3>” + data + “</h3>”);
</script>
<div id="menu_div"></div>
</body>
</html>

复制代码

//A 当点击手机上的menu按钮就会被触发。
//B 调用java代码 //D (getContent方法)

通过这段时间的开发，总结了一点经验。由于每次修改一点HTML，CSS或者JS都要装载在手机模拟器看效果。但是这个过程比较慢，严重影响效率。所以，最好通过FireFox或其他浏览器调试好了。在转载到手机模拟器上。

更多相关文章

随机推荐