Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android WebView簡介（JavaScripte篇）

Android WebView簡介（JavaScripte篇）

編輯：Android開發實例

如果訪問的頁面中有Javascript，則webview必須設置支持Javascript。
        webview.getSettings().setJavaScriptEnabled(true); 
我 們來了解一下android中webview是如何支持javascripte自定義對象的，在w3c標准中js有 window，history，document等標准對象，同樣我們可以在開發浏覽器時自己定義我們的對象調用手機系統功能來處理，這樣使用js就可以 為所欲為了。

先看一個實例： WebViewDemoActivity.java文件

 

 

 

  1. package com.teleca.robin;  
  2.  
  3. import android.app.Activity;  
  4.  
  5. import android.os.Bundle;  
  6.  
  7. import android.os.Handler;  
  8.  
  9. import android.util.Log;  
  10.  
  11. import android.webkit.WebSettings;  
  12.  
  13. import android.webkit.WebView;  
  14.  
  15. public class WebViewDemoActivity extends Activity {  
  16.  
  17. /** Called when the activity is first created. */ 
  18.  
  19. final static String tag="robin";  
  20.  
  21. WebView mWebView;  
  22.  
  23. Handler mHandler=new Handler();  
  24.  
  25. @Override 
  26.  
  27. public void onCreate(Bundle savedInstanceState) {  
  28.  
  29. super.onCreate(savedInstanceState);  
  30.  
  31. setContentView(R.layout.webviewdemo);         
  32.  
  33.         mWebView = (WebView) findViewById(R.id.webView);         
  34.  
  35.         WebSettings webSettings = mWebView.getSettings();         
  36.  
  37.         webSettings.setJavaScriptEnabled(true);         
  38.  
  39.         mWebView.addJavascriptInterface(new Object() {         
  40.  
  41.             public void clickOnAndroid() {         
  42.  
  43.                 mHandler.post(new Runnable() {         
  44.  
  45.                     public void run() {         
  46.  
  47.                         mWebView.loadUrl("javascript:wave()");      
  48.  
  49.                         Log.i(tag,"clickOnAndroid");  
  50.  
  51.                     }         
  52.  
  53.                 });         
  54.  
  55.             }         
  56.  
  57.         }, "demo");         
  58.  
  59.         mWebView.loadUrl("file:///android_asset/demo.html");     
  60.  
  61. }  
  62.  
  63. }  
  64.  

ssets\demo.html文件

  1. <html>         
  2.  
  3. <script language="javascript"> 
  4.  
  5. <!--       
  6.  
  7. function wave() {         
  8.  
  9. document.getElementById("droid").src="android_wave.png";         
  10.  
  11. }         
  12.  
  13. //--> 
  14.  
  15. </script>         
  16.  
  17. <body>         
  18.  
  19. <a onClick="window.demo.clickOnAndroid()">         
  20.  
  21. <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>         
  22.  
  23. Hello,are you all right?         
  24.  
  25. </a>         
  26.  
  27. </body>         
  28.  
  29. </html> 

我 們看addJavascriptInterface(Object obj,String interfaceName)這個方法，該方法將一個java對象綁定到一個javascript對象中，javascript對象名就是 “demo”，作用域是Global。這樣初始化webview後，在webview加載的頁面中就可以直接通過 javascript:window.demo訪問到綁定的java對象了。

   這樣在javascript中就可以調用java對象的clickOnAndroid()方法了，同樣我們可以在此對象中定義很多方法（比 如發短信，調用聯系人列表等手機系統功能。）,這裡wave()方法是java中調用javascript的例子。

這裡還有幾個知識點： 
1) 為了讓WebView從apk文件中加載assets，Android SDK提供了一個schema，前綴為"file:///android_asset/"。WebView遇到這樣的schema，就去當前包中的 assets目錄中找內容。如上面的"file:///android_asset/demo.html" 
2)addJavascriptInterface方法中要綁定的Java對象及方法不要直接在裡面運行，這裡是使用 Handler來進行的。

程序英文原址：http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/WebViewDemo/

我對其進行了修改，並加了簡單的注釋，這個例子的不僅是對js的操作，它還對android浏覽器做了簡單的介紹，
這些我會在注釋中一一講解。
Javascript彈出框有如下三種：
JavaScript代碼如下:   

alert(); 或alert("alert");

window.confirm("Are you srue?");  

window.prompt("Please input some word";,"this is text");  

WebChromeClient 中對三種dialog進行了捕捉，但不幸的是，並沒有回調函數可以使用， 或者說不能獲得用戶是點擊“OK”還是“CANCEL”的操作結果。
個人以為，這些方法的設置是為了對一些涉及到html操作的應用程序進行測試時使用的。
在WebChromeClient中還有以下的方法:
Java代碼 
    onProgressChanged(WebView view, int newProgress)； 
    onReceivedIcon(WebView view, Bitmap icon)； 
    onReceivedTitle(WebView view, String title)； 
    onRequestFocus(WebView view)； 
    onCloseWindow(WebView window)； 
    onProgressChanged(WebView view, int newProgress) 
這些方法的使用我會在以後的博文中講到.
請大家先看今天講解的重點
WebViewDemo2Activity.java文件 
 

  
  1. package com.teleca.robin;  
  2.  
  3. import android.app.Activity;  
  4.  
  5. import android.app.AlertDialog;  
  6.  
  7. import android.content.DialogInterface;  
  8.  
  9. import android.os.Bundle;  
  10.  
  11. import android.os.Handler;  
  12.  
  13. import android.util.Log;  
  14.  
  15. import android.webkit.JsPromptResult;  
  16.  
  17. import android.webkit.JsResult;  
  18.  
  19. import android.webkit.WebChromeClient;  
  20.  
  21. import android.webkit.WebSettings;  
  22.  
  23. import android.webkit.WebView;  
  24.  
  25. import android.widget.TextView;  
  26.  
  27. public class WebViewDemo2Activity extends Activity {  
  28.  
  29. /** Called when the activity is first created. */ 
  30.  
  31. final static String tag="robin";  
  32.  
  33. WebView mWebView;  
  34.  
  35. Handler mHandler=new Handler();  
  36.  
  37. TextView mReusultText;  
  38.  
  39. @Override 
  40.  
  41. public void onCreate(Bundle savedInstanceState) {  
  42.  
  43. super.onCreate(savedInstanceState);  
  44.  
  45. setContentView(R.layout.webviewdemo2);  
  46.  
  47. mReusultText = (TextView) findViewById(R.id.textView);    
  48.  
  49.         mWebView = (WebView) findViewById(R.id.webView);         
  50.  
  51.         WebSettings webSettings = mWebView.getSettings();  
  52.  
  53.         mWebView.setWebChromeClient(new MyWebChromeClient());    
  54.  
  55.         webSettings.setJavaScriptEnabled(true);        
  56.  
  57.         mWebView.loadUrl("file:///android_asset/demo2.html");     
  58.  
  59. }  
  60.  
  61.  /**   
  62.  
  63.      * 繼承WebChromeClient類   
  64.  
  65.      * 對js彈出框時間進行處理   
  66.  
  67.      *    
  68.  
  69.      */    
  70.  
  71.     final class MyWebChromeClient extends WebChromeClient {    
  72.  
  73.         /**   
  74.  
  75.          * 處理alert彈出框   
  76.  
  77.          */    
  78.  
  79.         @Override    
  80.  
  81.         public boolean onJsAlert(WebView view,String url, String message,JsResult result) {    
  82.  
  83.             Log.d(tag,"onJsAlert:"+message);    
  84.  
  85.             mReusultText.setText("Alert:"+message);    
  86.  
  87.             //對alert的簡單封裝    
  88.  
  89.             new AlertDialog.Builder(WebViewDemo2Activity.this).    
  90.  
  91.                 setTitle("Alert").setMessage(message).setPositiveButton("OK",    
  92.  
  93.                 new DialogInterface.OnClickListener() {    
  94.  
  95.                     @Override    
  96.  
  97.                     public void onClick(DialogInterface arg0, int arg1) {    
  98.  
  99.                        //TODO    
  100.  
  101.                    }    
  102.  
  103.             }).create().show();    
  104.  
  105.             result.confirm();    
  106.  
  107.             return true;    
  108.  
  109.         }    
  110.  
  111.         /**   
  112.  
  113.          * 處理confirm彈出框   
  114.  
  115.          */    
  116.  
  117.         @Override    
  118.  
  119.         public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {    
  120.  
  121.             Log.d(tag, "onJsConfirm:"+message);    
  122.  
  123.             mReusultText.setText("Confirm:"+message);    
  124.  
  125.             result.confirm();    
  126.  
  127.             return super.onJsConfirm(view, url, message, result);    
  128.  
  129.         }    
  130.  
  131.         /**   
  132.  
  133.          * 處理prompt彈出框   
  134.  
  135.          */    
  136.  
  137.         @Override    
  138.  
  139.         public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {    
  140.  
  141.             Log.d(tag,"onJsPrompt:"+message);    
  142.  
  143.             mReusultText.setText("Prompt input is :"+message);    
  144.  
  145.             result.confirm();    
  146.  
  147.             return super.onJsPrompt(view, url, message, message, result);    
  148.  
  149.         }    
  150.  
  151.     }    
  152.  
  153. }  
  154.  
demo2.html文件   
  1. <html>         
  2. <script language="javascript"> 
  3. <!--       
  4.     function doAlert() {         
  5. alert("alert");        
  6. }    
  7. function doConfirm() {         
  8. window.confirm("Are you srue?")        
  9. }         
  10. function doPrompt() {         
  11. window.prompt("Please input some word","this is text");    
  12. }    
  13. //--> 
  14. </script>         
  15. <body>         
  16. <a onClick="doAlert()">            
  17. alert("this is a alert")     
  18. </a> 
  19. <br> 
  20. <a onClick="doConfirm()">            
  21. window.confirm("Are you srue?")    
  22. </a> 
  23. <br> 
  24. <a onClick="doPrompt()">            
  25. window.prompt("Please input some word","this is text")  
  26. </a> 
  27. <br>        
  28. </body>         
  29. </html>  

 

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android JSON解析器 Android MediaPlayer(多媒體播放) Android創建Menu菜單實例 Android中刪除Preference詳解 深入Android【七】 —— 資源文件 android 2.3 r1 中文 api (58) —— TabHost
Android加載Spinner

可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
Android獲取app應用程序大小的方法

Android對這種方法進行了封裝，我們沒有權限去調用這個方法，
Android JSON解析器

JSON代表JavaScript對象符號。它是一個獨立的數據交換格式，是
閱讀排行版
Copyright © Android教程網 All Rights Reserved