WebView的Java和javascript相互调用

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

先看Activity的代码

  1. public class WebViewerActivity extends Activity {
  2.     /*
  3.      * The WebView that is placed in this Activity
  4.      */
  5.     private WebView mWebView;
  6.    
  7.     /*
  8.      * The index page uri
  9.      */
  10.     private String contentUri = "file:///android_asset/index.html";//A
  11.    
  12.    private Handler mHandler = new Handler();                //B
  13.     @Override
  14.     public void onCreate(Bundle savedInstanceState) {
  15.         super.onCreate(savedInstanceState);
  16.         
  17.         CookieSyncManager.createInstance(this);
  18.         
  19.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  20.         
  21.         mWebView = new WebView(this);
  22.         setContentView(mWebView);
  23.         
  24.         WebSettings settings = mWebView.getSettings();
  25.         //settings.setAllowFileAccess(true);
  26.         settings.setJavaScriptEnabled(true);
  27.         settings.setJavaScriptCanOpenWindowsAutomatically(true);
  28.         //settings.setBuiltInZoomControls(true);
  29.         settings.setDefaultTextEncodingName("utf-8");
  30.         
  31.         mWebView.addJavascriptInterface(new Object() {      //C
  32.                 public void exit() {
  33.                         Log.i("javascript", "exit");
  34.                         finish();
  35.                 }
  36.                
  37.                 /**
  38.                  *
  39.                  * @param type         the resource type.
  40.                  * @param id                the resource id.
  41.                  * @return                         
  42.                  */
  43.       public String getContent(String type, String id) { //D
  44.            return “resource type is ” + type + “ and id is ” + id;
  45.      }, "demo");
  46.      mWebView.loadUrl(contentUri);
  47. }
  48.     ……………………………………
  49. public void openMenu() {
  50.         mHandler.post(new Runnable() {                                                //B
  51.                 public void run() {
  52.                         mWebView.loadUrl("javascript:openMenu()");
  53.                 }
  54.         });
  55. }
  56.        
  57.   @Override
  58. public boolean onCreateOptionsMenu(Menu menu) {
  59.             return true;
  60. }

  61. @Override
  62. public boolean onPrepareOptionsMenu(Menu menu) {
  63.         openMenu();
  64.         return true;
  65. }
复制代码

上述代码有以下几点需要注意的。
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中如何调用。

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <title>demo index</title>
  5.         <script type="text/javascript">
  6.          function showMenuItems()                         //A
  7.         {
  8.            var menuDiv = document.getElementById ("menu_div");
  9.            menuDiv.innerHTML =”<b>open menu</b>”
  10.         }
  11.        </script>
  12. </head>
  13. <body>
  14.         <script type="text/javascript">
  15.                 var data = window.demo.getContent ("music","1"); //B
  16.                 document.write(“<h3>” + data + “</h3>”);
  17.         </script>
  18.         <div id="menu_div"></div>
  19. </body>
  20. </html>
复制代码

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

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

你可能感兴趣的:(JavaScript,java,html,android,css)