Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android Internet - WebView 的使用

Android Internet - WebView 的使用

編輯:關於Android編程

WebView是Android 提供的操作網頁的一個組件。用於浏覽網頁及其他Internet資源。這裡總結了一些WebView 的常用接口,和2個小示例程序用於自己開發時直接使用,就不用再去Baidu了,節省點時間。


使用loadUrl和loadData

WebView.loadUrl:打開URL頁面(本地或遠端)。
WebView.goForward:實現浏覽器的前進功能。
WebView.goBack:實現浏覽器的回退功能。
WebView.loadData:加載HTML數據。

示例程序 1:使用WebView.loadUrl 浏覽網頁
這裡寫圖片描述

Layout file:



    

        
        

MainActivity.java

package com.example.internet_webview;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends Activity 
{
    private WebView m_Webview;
    private Button  m_Go;
    private EditText m_Url;

    private Button  m_GoForward;
    private Button  m_GoBack;


    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        m_Webview = (WebView) findViewById(R.id.webview);
        m_Url = (EditText) findViewById(R.id.etUrl);
        m_Go  = (Button) findViewById(R.id.btnGo);

        m_GoForward  = (Button) findViewById(R.id.btnGoForward);
        m_GoBack  = (Button) findViewById(R.id.btnGoBack);

        m_Webview.setWebViewClient(new WebViewClient(){});

        m_Go.setOnClickListener(new OnClickListener() 
        {
            @Override
            public void onClick(View v) 
            {
                m_Webview.loadUrl(m_Url.getText().toString());
            }
        });

        m_GoForward.setOnClickListener(new OnClickListener() 
        {
            @Override
            public void onClick(View v) 
            {
                if (m_Webview.canGoForward())
                    m_Webview.goForward();
            }
        });

        m_GoBack.setOnClickListener(new OnClickListener() 
        {
            @Override
            public void onClick(View v) 
            {
                if (m_Webview.canGoBack())
                    m_Webview.goBack();
            }
        });     
    }
}

示例程序 2:使用WebView.loadData解析HTML

這裡寫圖片描述

在輸入欄中 網址變成了HTML代碼,這時使用LoadData可以把HTML代碼解析出來

MainActivity.hava<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> package com.example.internet_webview_loaddata; import android.os.Bundle; import android.app.Activity; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; import android.widget.EditText; public class MainActivity extends Activity { private WebView m_Webview; private Button m_Go; private EditText m_Url; private Button m_GoForward; private Button m_GoBack; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); m_Webview = (WebView) findViewById(R.id.webview); m_Url = (EditText) findViewById(R.id.etUrl); m_Go = (Button) findViewById(R.id.btnGo); m_GoForward = (Button) findViewById(R.id.btnGoForward); m_GoBack = (Button) findViewById(R.id.btnGoBack); m_Webview.setWebViewClient(new WebViewClient(){}); String customHtml =

Hello

; m_Url.setText(customHtml); m_Go.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { m_Webview.loadData(m_Url.getText().toString(), text/html, UTF-8); } }); m_GoForward.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (m_Webview.canGoForward()) m_Webview.goForward(); } }); m_GoBack.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (m_Webview.canGoBack()) m_Webview.goBack(); } }); } }

WebView.loadUrl 與 WebView.loadData 區別

通過兩個測試結果可以很清楚的看到這兩個接口使用時的區別,一個是輸入的網址,另一個輸入的是網頁的代碼。WebView並不是一個單純的能加載URL顯示網頁的控件,它本身也是一個浏覽器的引擎,基於這一點,也許可以加以利用,開發出更有趣的App。


與JavaScript的交互

WebView與JavaScript的交互其實本質上是WebView中定義的WebClient的浏覽器引擎與javascript的交互。浏覽器引擎處理javascript的同時也提供給Andriod一些接口,使它能夠接收到信息並且進行響應。

處理方式:

Android代碼中實現Javascript接口的處理
javascript::alert() === WebChromeClient::onJsAlert()
javascript::confirm() === WebChromeClient::onJsConfirm()
javascript::prompt() === WebChromeClient::onJsPrompt()

當javascript調用它的函數時,也會觸發Android調用響應的接口。

Android提供自定義接口供Javascript使用。
這裡用到的主要是WebChromeClient::addJavascriptInterface()接口。其中實現的一些接口函數可以供javascript程序來調用。

Android與Javascript通過消息交互。
這裡使用的是WebChromeClient::onConsoleMessage()接口,它為Android提供了處理javascript日志消息的一種能力,也可以作為消息傳遞的一種方式。

layout 定義
activity_main.xml,其中主要的就是WebView.



    

        
        

        

js_prompt_layout.xml 彈出對話框時的 layout。




    

     


JS頁面定義和預覽

這裡寫圖片描述


<script type=text/javascript>  
            function doAlert() {  
                alert(Alert I am from JS!);  
            }  

            function doConfirm() {
                confirm(Confirm from JS);  
            }  

            function doPrompt() 
            {
                var val = prompt(Prompt from JS, please input);
                if (val) 
                {
                    document.getElementById('id_name').value = val
                }
            }  

            function CustimizeFunc() 
            {  
                CustimizeAndroidFunc.popupDialogue();  
            }

            function ShowReturn() 
            {  
                var retResult = CustimizeAndroidFunc.showResult();
                var dspList = document.getElementById(DispList);

                var div = document.createElement(div);
                div.innerHTML = retResult;
                dspList.appendChild(div);
            }            
        </script>










 

程序運行結果

MainActivity.java
注意: @JavascriptInterface 在Android較新的版本中為了防止JS能夠通過反射取得Java類所有的接口,在定義接口時增加了一個@JavascriptInterface屬性,只有帶有這個標志函數才能在JS中被訪問。

package com.example.internet_webview_jswork;


import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.EditText;

@SuppressLint({ JavascriptInterface, SetJavaScriptEnabled })
public class MainActivity extends Activity 
{
    private WebView m_Webview;
    private WebChromeClient m_Client;


    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        m_Webview = (WebView) findViewById(R.id.webview);


        m_Webview.getSettings().setJavaScriptEnabled(true);
        m_Client = new WebChromeClient()
        {
             public boolean onJsAlert(WebView view, String url, String message, final JsResult result) 
             {  
                 new AlertDialog.Builder(MainActivity.this)  
                         .setTitle(JS Call alert and Android show Alert Dialogue)  
                         .setMessage(message)  
                         .setPositiveButton(YES, new DialogInterface.OnClickListener() 
                         {  
                             @Override  
                             public void onClick(DialogInterface dialog, int which) 
                             {  
                                 result.confirm();  
                             }  
                         }).create().show();  
                 return true;  
             }  

             public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) 
             {  
                 new AlertDialog.Builder(MainActivity.this)  
                         .setTitle(JS Call confirm and Android show Confirm Dialogue)  
                         .setMessage(message)  
                         .setPositiveButton(YES, new DialogInterface.OnClickListener() {  
                             @Override  
                             public void onClick(DialogInterface dialog, int which) 
                             {  
                                 result.confirm();  
                             }  
                         })  
                         .setNegativeButton(NO, new DialogInterface.OnClickListener() {  
                             @Override  
                             public void onClick(DialogInterface dialog, int which) 
                             {
                                 result.cancel();  
                             }  
                         }).create().show();  
                 return true;  
             }


             public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,  
                     final JsPromptResult result) 
             {  
                 LayoutInflater inflater = getLayoutInflater();  
                 View prompt = inflater.inflate(R.layout.js_prompt_layout, null);  
                 final EditText etJSPromptValue = (EditText) prompt.findViewById(R.id.etJSPrompt);  

                 new AlertDialog.Builder(MainActivity.this)  
                         .setTitle(JS Call prompt and Android show Prompt Dialogue)  
                         .setView(prompt)  
                         .setPositiveButton(YES, new DialogInterface.OnClickListener() 
                         {  
                             @Override  
                             public void onClick(DialogInterface dialog, int which) 
                             {
                                 // Here will confirm the Android text to JS
                                 result.confirm(etJSPromptValue.getText().toString());  
                             }  
                         })  
                         .setNegativeButton(NO, new DialogInterface.OnClickListener() 
                         {  
                             @Override  
                             public void onClick(DialogInterface dialog, int which) 
                             {
                                 result.cancel();  
                             }  
                         }).create().show();  
                 return true;  
            }
        };

        m_Webview.setWebChromeClient(m_Client);
        m_Webview.addJavascriptInterface(new Object() 
        {
            @SuppressWarnings(unused)
            @JavascriptInterface 
            public void popupDialogue()
            {
                new AlertDialog.Builder(MainActivity.this) 
                .setTitle(JS Call Android popupDialogue)  
                .setMessage(JS Call Android Custimized function::popupDialogue)
                .setPositiveButton(YES, new DialogInterface.OnClickListener() {  
                    @Override  
                    public void onClick(DialogInterface dialog, int which) 
                    {}  
                })
                .setNegativeButton(NO, new DialogInterface.OnClickListener() {  
                    @Override  
                    public void onClick(DialogInterface dialog, int which) 
                    {}
                }).create().show();  
            }

            @SuppressWarnings(unused)
            @JavascriptInterface
            public String showResult() 
            {
                String strRet = I am the message from Android;
                return strRet;
            }


        }, CustimizeAndroidFunc);  

        m_Webview.loadUrl(file:///android_asset/js_work.html);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

測試GUI.
這裡寫圖片描述

測試結果
- 點擊紅色部分的按鈕時,輸入在Android對話框中的內容會把值顯示在HTML的輸入框中。

點擊藍色部分的按鈕時Android函數的返回值會被顯示到HTML中。

這裡寫圖片描述

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved