android WebView詳解

時間 2019-11-06

原文原文鏈接

瀏覽器控件是每一個開發環境都具有的，這爲馬甲神功提供了用武之地，windows的有webbrowser，android和ios都有webview。只是其引擎不一樣，相對於微軟的webbrowser，android及ios的webview的引擎都是webkit，對Html5提供支持。本篇主要介紹android的webview之強大。javascript

A. webview組件如何使用

1) 添加權限：AndroidManifest.xml中必須使用許可"android.permission.INTERNET",不然會出Web page not available錯誤。

2) 在要Activity中生成一個WebView組件：WebView webView = new WebView(this);或者能夠在activity的layout文件裏添加webview控件：

<WebViewhtml

android:id="@+id/wv"java

android:layout_width="fill_parent"jquery

android:layout_height="fill_parent"android

android:text="@string/hello"ios

/>web

3)       設置WebView基本信息：
          若是訪問的頁面中有Javascript，則webview必須設置支持Javascript。
          webview.getSettings().setJavaScriptEnabled(true);
          觸摸焦點起做用
          requestFocus();
          取消滾動條
          this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

4)       設置WevView要顯示的網頁：
          互聯網用：webView.loadUrl("http://www.google.com");
          本地文件用：webView.loadUrl("file:///android_asset/XX.html");  本地文件存放在：assets文件中

5) 若是但願點擊連接由本身處理，而不是新開Android的系統browser中響應該連接。給WebView添加一個事件監聽對象（WebViewClient)並重寫其中的一些方法：

shouldOverrideUrlLoading：對網頁中超連接按鈕的響應。當按下某個鏈接時WebViewClient會調用這個方法，並傳遞參數：按下的url。好比當webview內嵌網頁的某個數字被點擊時，它會自動認爲這是一個電話請求，會傳遞url：tel:123,若是你不但願如此可經過重寫shouldOverrideUrlLoading函數解決：json

public boolean shouldOverrideUrlLoading(WebView view,String url)
      {
      if(url.indexOf("tel:")<0){//頁面上有數字會致使鏈接電話
           view.loadUrl(url);
        }
           return true;          
      }

另外還有其餘一些可重寫的方法
1，接收到Http請求的事件
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)

2，打開連接前的事件
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } windows

這個函數咱們能夠作不少操做，好比咱們讀取到某些特殊的URL，因而就能夠不打開地址，取消這個操做，進行預先定義的其餘操做，這對一個程序是很是必要的。

3，載入頁面完成的事件
public void onPageFinished(WebView view, String url){ } 瀏覽器

一樣道理，咱們知道一個頁面載入完成，因而咱們能夠關閉loading條，切換程序動做。

4，載入頁面開始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { }

這個事件就是開始載入頁面調用的，一般咱們能夠在這設定一個loading的頁面，告訴用戶程序在等待網絡響應。

經過這幾個事件，咱們能夠很輕鬆的控制程序操做，一邊用着瀏覽器顯示內容，一邊監控着用戶操做實現咱們須要的各類顯示方式，同時能夠防止用戶產生誤操做。

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

覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法。

public boolean onKeyDown(int keyCoder,KeyEvent event)
   {
              if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK)
              {
                   webview.goBack();   //goBack()表示返回webView的上一頁面
                   return true;
                }
                   return false;
}

B. Webview與js交互

Webview與js的雙向交互纔是android的webview強大所在，也是馬甲精神可以完全執行的基礎保障。

首先，webview能夠定義一個在其內嵌頁面中能夠觸發的事件

wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

private final class DemoJavaScriptInterface

    {
     DemoJavaScriptInterface(){}

     public void clickonAndroid( final String order){
         mHandler.post(newRunnable(){
             @Override
             public void run(){
                       jsonText="{"name":""+order+""}";
                wv.loadUrl("javascript:wave("+jsonText+")");
             }
         });
     }
}

經過以上代碼，便可實如今其內嵌網頁中觸發window.demo.clickOnAndroid(str)事件並傳參數str給webview。Webview接收到str以後，能夠經過以上代碼觸發其內嵌頁面中的js函數wave(str)。這樣就能夠實現網頁觸發webview的事件並傳參數，webview接收參數並調用js函數。

下面看個人Html腳本：

<!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" src="jquery.js"></script>
<script>
function toclient()
{
    var order=$("#val").val();
window.demo.clickonAndroid(order);
   
    }
   
    function wave(str){
       //alert(str.name);
       $("#fromclient").text(str.name);
    }
</script>
</head>
    <body>這是一個html頁面
    <br/>
 輸入一個字符串：<br/>
  <input id="val" />
        <input type="submit" value="點擊提交給客戶端"
        onclick="toclient();"/>
      <br /> 
        顯示返回：<label id="fromclient"></label>
    </body>
</html>

經過腳本看到wave（str）函數是負責將原來傳給webview的數據從新拿回頁面，效果圖以下：

另外，若是你想獲取頁面的一些處理數據並交給webview客戶端處理，可在wave函數裏將數據alert，而後webview中重寫WebChromeClient的onJsAlert函數，具體代碼以下

wv.setWebChromeClient(new MyWebChromeClient());

final  class MyWebChromeClient extends WebChromeClient{

    @Override

      public booleanonJsAlert(WebView view, String url, String message, final JsResult result) { 

//message就是wave函數裏alert的字符串，這樣你就能夠在android客戶端裏對這個數據進行處理

                result.confirm();        

              } 

 return true;  
        }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

android WebView詳解

A. webview組件如何使用

1) 添加權限：AndroidManifest.xml中必須使用許可"android.permission.INTERNET",不然會出Web page not available錯誤。

2) 在要Activity中生成一個WebView組件：WebView webView = new WebView(this);或者能夠在activity的layout文件裏添加webview控件：

3) 設置WebView基本信息： 若是訪問的頁面中有Javascript，則webview必須設置支持Javascript。 webview.getSettings().setJavaScriptEnabled(true); 觸摸焦點起做用 requestFocus(); 取消滾動條 this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

4) 設置WevView要顯示的網頁： 互聯網用：webView.loadUrl("http://www.google.com"); 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets文件中

B. Webview與js交互

3) 設置WebView基本信息：
若是訪問的頁面中有Javascript，則webview必須設置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
觸摸焦點起做用
requestFocus();
取消滾動條
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

4) 設置WevView要顯示的網頁：
互聯網用：webView.loadUrl("http://www.google.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets文件中