Android与JavaScript方法相互调用


在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法，这样html才能调用android方法，在这里我个人觉得有点和DWR相似。

为了让大家容易理解，我写了一个简单的Demo，具体步骤如下:

第一步:新建一个Android工程,命名为WebViewDemo(这里我在assets里定义了一个html页面)。

第二步:修改main.xml布局文件，增加了一个WebView控件还有Button控件，代码如下: 

  1. <?xml version="1.0" encoding="utf-8"?>     
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:orientation="vertical"   
  4.     android:layout_width="fill_parent"   
  5.     android:layout_height="fill_parent"   
  6.     >     
  7.     <TextView       
  8.         android:layout_width="fill_parent"      
  9.         android:layout_height="wrap_content"      
  10.         android:text="Welcome to Mr Wei's Blog."   
  11.         />     
  12.     <WebView     
  13.         android:id="@+id/webview"   
  14.         android:layout_width="fill_parent"      
  15.         android:layout_height="wrap_content"      
  16.     />     
  17.     <Button     
  18.         android:id="@+id/button"   
  19.         android:layout_width="fill_parent"   
  20.         android:layout_height="wrap_content"   
  21.         android:text="Change the webview content"   
  22.     />     
  23. </LinearLayout>   
  24. <?xml version="1.0" encoding="utf-8"?>  
  25. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  26.     android:orientation="vertical"  
  27.     android:layout_width="fill_parent"  
  28.     android:layout_height="fill_parent"  
  29.     >  
  30. <TextView   
  31.      android:layout_width="fill_parent"   
  32.      android:layout_height="wrap_content"   
  33.      android:text="Welcome to Mr Wei's Blog."  
  34.      />  
  35. <WebView  
  36.    android:id="@+id/webview"  
  37.    android:layout_width="fill_parent"   
  38.      android:layout_height="wrap_content"   
  39. />  
  40. <Button  
  41.    android:id="@+id/button"  
  42.    android:layout_width="fill_parent"  
  43.    android:layout_height="wrap_content"  
  44.    android:text="Change the webview content"  
  45. />  
  46. </LinearLayout>  

第三步:在assets目录下新建一个demo.html文件,代码如下(这里不知道为何多了mce:这几个东东,<script></script>这样是对的): 

  1. <html>     
  2.     <mce:script language="javascript"><!--     
  3.       
  4.         function fillContent(){     
  5.             document.getElementById("content").innerHTML =      
  6.                  "This Content is showed by Android invoke Javascript function.";     
  7.         }     
  8.          
  9. // --></mce:script>        
  10. <body>     
  11.     <p><a onClick="window.demo.startMap()" href="">Start GoogleMap</a></p>     
  12.     <p id="content"></p>     
  13.     <p>A Demo ----Android and Javascript invoke each other.</p>     
  14.     <p>Author:Frankiewei</p>     
  15. </body>     
  16. </html>     
  17. <html>  
  18. <mce:script language="javascript"><!--  
  19.   
  20.    function fillContent(){  
  21.     document.getElementById("content").innerHTML =   
  22.         "This Content is showed by Android invoke Javascript function.";  
  23.    }  
  24.   
  25. // --></mce:script>    
  26. <body>  
  27. <p><a onClick="window.demo.startMap()" href="">Start GoogleMap</a></p>  
  28. <p id="content"></p>  
  29. <p>A Demo ----Android and Javascript invoke each other.</p>  
  30. <p>Author:Frankiewei</p>  
  31. </body>  
  32. </html>  
  • 1
  • 2
  • 下一页

相关内容