Android的webview和JavaScript互相調用

時間  2019-11-18
標籤 android webview javascript 互相 調用 欄目 Android 简体版
原文   原文鏈接

Android中自定義文件必須放在資產文件夾下assetjavascript

1.用WebView來顯示HTML代碼html

2.容許WebView執行JavaScriptjava

    webView.getSettings().setJavaScriptEnabled(true);android

3.獲取到HTML文件，也可從網絡中獲取web

   webView.loadUrl("file:///android_asset/test.html");   //HTML文件存放在assets文件夾中json

4.使用addJavascriptInterface添加一個android中的某個類的對象, 讓JS能夠訪問該對象的方法, 該對象中也能夠調用JS中的方法瀏覽器

   webView.addJavascriptInterface(new Contact(), "contact");網絡

 

 

 1 import android.app.Activity;
 2 import android.content.Intent;
 3 import android.net.Uri;
 4 import android.os.Bundle;
 5 import android.webkit.WebView;
 6 
 7 public class MainActivity extends Activity {
 8     private WebView webView;
 9 
10     public void onCreate(Bundle savedInstanceState) {
11         super.onCreate(savedInstanceState);
12         setContentView(R.layout.main);
13         //加載頁面
14         webView = (WebView) findViewById(R.id.webView);
15         //容許在webview執行JavaScript腳本
16         webView.getSettings().setJavaScriptEnabled(true);
17         //找到Html文件，也能夠用網絡上的地址
18         webView.loadUrl("file:///android_asset/index.html");
19         // 使用addJavascriptInterface方法去添加一個android的類的對象, 讓JS能夠訪問該對象的方法, 該對象中能夠調用JS中的方法
20         webView.addJavascriptInterface(new Contact(), "contact");
21     }
22 
23     private final class Contact {
24         //JavaScript調用此方法撥打電話
25         public void call(String phone) {
26             startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));
27         }
28 
29         //Html調用此方法傳遞數據
30         public void showcontacts() {
31             String json = "[{\"name\":\"zsw\", \"price\":\"16888888888\", \"phone\":\"1008610086\"}]"; 
32             // 調用JS中的方法
33             webView.loadUrl("javascript:show('" + json + "')");
34         }
35     }
36 }

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
<title>Insert title here</title>        
 <script type="text/javascript">            
   function show(jsondata){                               
 var jsonobjs = eval(jsondata);                    
 var table = document.getElementById("personTable");                   
 for(var y=0; y<jsonobjs.length; y++){                       
 var tr = table.insertRow(table.rows.length);                        
 var td1 = tr.insertCell(0);                       
 var td2 = tr.insertCell(1);                       
 td2.align = "center";                        
 var td3 = tr.insertCell(2);                        
 td3.align = "center";                        
 td1.innerHTML = jsonobjs[y].name;                        
 td2.innerHTML = jsonobjs[y].price;                         
 td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";                    
 }           
 }       
 </script>    
</head>   
 <body onload="javascript:contact.showcontacts()">       
<table border="0" width="100%" id="personTable" cellspacing="0">           
 <tr>               
 <td width="30%">姓名</td>                
 <td width="30%" align="center">存款</td>                
 <td align="center">電話</td>          
 </tr>        
</table>    
</body>
</html>

 

撥打電話須要添加權限：app

<uses-permission android:name="android.permission.CALL_PHONE" />框架

 1 自定義webviewClient
 2 @Override
 3 public boolean shouldOverrideUrlLoading(WebView view, String url) {
 4 
 5 //關於這點必須加入，不然本身的webview不能繼續深刻跳轉頁面層級
 6 view.loadUrl(url);
 7 return true;
 8 }
 9 
10 
11 public class MyWebClient extends WebViewClient
12     {
13         @Override  
14         public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
15         {
16         Log.log_d("tweb", "onReceivedError errcode: " + errorCode + " description: "
17         + description + " failingUrl: " + failingUrl);
18         }
19         
20 @Override
21 public boolean shouldOverrideUrlLoading(WebView view, String url) {
22 if (url.contains("tel:")) {
23 Intent myIntentDial = new Intent("android.intent.action.DIAL",
24 Uri.parse(url));
25 startActivity(myIntentDial);
26 } else if (url.contains("download")) {
27 Intent viewIntent = new Intent(Intent.ACTION_VIEW,
28 Uri.parse(url));
29 startActivity(viewIntent);
30 } else {
31 mProgressBar.setProgress(0);
32 mProgressBar.setVisibility(View.VISIBLE);
33 view.loadUrl(url);
34 }
35 return true;
36 }    @Override
37 public void onLoadResource(WebView view, String url)
38     {
39     Log.log_d("tweb", "onLoadResource: " + url);
40     }   
41     @Override
42 public void onPageStarted(WebView view, String url, Bitmap favicon)
43     {
44     Log.log_d("tweb", "onPageStarted: " + url);
45     if(url.equals(mHistoryTag)){
46     mWebView.loadDataWithBaseURL(null, mDataSource, "text/html", "UTF-8", mHistoryTag);
47     }
48     mCurrentUrl = url;
49    
50     }
51    
52     @Override
53 public void onPageFinished(WebView view, String url)
54     {
55     Log.log_d("tweb", "onPageFinished: " + url);
56     }
57         @Override
58         public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) { 
59         // 重寫此方法可讓webview處理https請求
60         handler.proceed();
61         }
62 　　}
63 　　

下面摘自其餘高手大大的：

在Android手機中內置了一款高性能webkit內核瀏覽器，在SDK中封裝爲一個叫作WebView組件。 

什麼是webkit 

WebKit是Mac OS X v10.3及以上版本所包含的軟件框架（對v10.2.7及以上版本也可經過軟件更新獲取）。 同時，WebKit也是Mac OS X的Safari網頁瀏覽器的基礎。WebKit是一個開源項目，主要由KDE的KHTML修改而來而且包含了一些來自蘋果公司的一些組件。 

傳統上，WebKit包含一個網頁引擎WebCore和一個腳本引擎JavaScriptCore，它們分別對應的是KDE的KHTML和KJS。不過， 隨着JavaScript引擎的獨立性愈來愈強，如今WebKit和WebCore已經基本上混用不分（例如Google Chrome和Maxthon 3採用V8引擎，卻仍然宣稱本身是WebKit內核）。 

這裏咱們初步體驗一下在android是使用webview瀏覽網頁，在SDK的Dev Guide中有一個WebView的簡單例子 。 

==========================================================================
 
    1.AndroidManifest.xml中必須使用許可"android.permission.INTERNET",不然會出Web page not available錯誤。

==========================================================================
    2.若是訪問的頁面中有Javascript，則webview必須設置支持Javascript。
        webview.getSettings().setJavaScriptEnabled(true);  
    3.若是頁面中連接，若是但願點擊連接繼續在當前browser中響應，而不是新開Android的系統browser中響應該連接，必須覆蓋 webview的WebViewClient對象。

mWebView.setWebViewClient(new  WebViewClient(){                         public boolean  shouldOverrideUrlLoading(WebView view, String url) {                              view.loadUrl(url);                             return true;                          }             }); 

 4.若是不作任何處理，瀏覽網頁，點擊系統「Back」鍵，整個Browser會調用finish()而結束自身，若是但願瀏覽的網 頁回退而不是推出瀏覽器，須要在當前Activity中處理並消費掉該Back事件。

public boolean onKeyDown(int keyCode, KeyEvent event) {           
  if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {  
          mWebView.goBack();                       
            return true;   
          }          
   return super.onKeyDown(keyCode, event);        
 }

 

5.android中webview支持javascript自定義對象

a.設置webview支持javascript.  webSettings.setJavaScriptEnabled(true); 

b.綁定android對象到javascript對象. addJavascriptInterface(Object obj,String interfaceName);

c.頁面中調用javascript對象. javascript:window.demo.方法名稱();

在w3c標準中js有 window，history，document等標準對象，一樣咱們能夠在開發瀏覽器時本身定義咱們的對象調用手機系統功能來處理，這樣使用js就能夠 隨心所欲了。

  看一個實例：

 1 public class WebViewDemo extends Activity {          p
 2 rivate WebView mWebView;       
 3   private Handler mHandler = new Handler();             
 4  public void onCreate(Bundle icicle) {                
 5     super.onCreate(icicle);           
 6     setContentView(R.layout.webviewdemo);            
 7     mWebView = (WebView)findViewById(R.id.webview);              
 8      WebSettings webSettings = mWebView.getSettings();     
 9         
10       webSettings.setJavaScriptEnabled(true);             
11       mWebView.addJavascriptInterface(new Object() {               
12   public void clickOnAndroid() {                     
13     mHandler.post(new Runnable()
14        {                         public void run() {                          
15    mWebView.loadUrl("javascript:wave()");                         }     
16                 });                 }             }, "demo");           
17   mWebView.loadUrl("file:///android_asset/demo.html");         }     }

 

咱們看addJavascriptInterface(Object obj,String interfaceName)這個方法，該方法將一個java對象綁定到一個javascript對象中，javascript對象名就是 interfaceName（demo），做用域是Global。這樣初始化webview後，在webview加載的頁面中就能夠直接經過 javascript:window.demo訪問到綁定的java對象了。

來看看在html中是怎樣調用的。

<html>     
        <script language="javascript"><!--   
     
                function wave() {     
                    document.getElementById("droid").src="android_waving.png";     
                }     
           
// --></script>     
        <body>     
            <a onClick="window.demo.clickOnAndroid()">     
                                <img id="droid" src="android_normal.png" src="android_normal.png"/><br>     
                                Click me!     
            </a>     
        </body>     
</html> 

這樣在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的目的。

 

6.webview 中使用div層會出現重疊顯現.

只能用dom方式操做div的刪除動做.

7.android中webview接收favicon老是獲取爲null解決方案

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程