Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 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. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved