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或其他浏览器调试好了。在转载到手机模拟器上。
更多相关文章
- 如何用同一份代码产生不同包名得APK包
- android LayoutInflater实例化的方法
- Android中滑屏实现----手把手教你如何实现触摸滑屏以及Scroller
- android audio系统的概况
- arcgis for android访问arcgis server上自己制作部署的地图服务
- (Linux平台)在Android中调用JNI
- android中View的实时刷新
- [转]Android(安卓)中Preferences的使用
- Android(安卓)Studio获取SHA1(获取SHA1的通用方法)