android 浏览器控件[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

在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对象。

1. mWebView.setWebViewClient(new WebViewClient(){       
2.                     public boolean shouldOverrideUrlLoading(WebView view, String url) {       
3.                         view.loadUrl(url);       
4.                         return true;       
5.                     }       
6.         });   

 4.如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网 页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。

1. public boolean onKeyDown(int keyCode, KeyEvent event) {       
2.         if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
3.             mWebView.goBack();       
4.                    return true;       
5.         }       
6.         return super.onKeyDown(keyCode, event);       
7.     }     

下一步让我们来了解一下android中webview是如何支持javascripte自定义对象的，在w3c标准中js有 window，history，document等标准对象，同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理，这样使用js就可以 为所欲为了。

package com.orgcent.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebSettings.LayoutAlgorithm;

public class AndroidWebViewActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView content_wv = (WebView) findViewById(R.id.content_wv);
        WebSettings ws = content_wv.getSettings();
        ws.setJavaScriptEnabled(true); // 设置支持javascript脚本
        ws.setAllowFileAccess(true); // 允许访问文件
        ws.setBuiltInZoomControls(true); // 设置显示缩放按钮
        ws.setSupportZoom(true); //支持缩放

        /**
         * 用WebView显示图片，可使用这个参数
         * 设置网页布局类型：
         * 1、LayoutAlgorithm.NARROW_COLUMNS ： 适应内容大小
         * 2、LayoutAlgorithm.SINGLE_COLUMN:适应屏幕，内容将自动缩放
         */
        ws.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
        ws.setDefaultTextEncodingName(“utf-8”); //设置文本编码
        ws.setAppCacheEnabled(true);
        ws.setCacheMode(WebSettings.LOAD_DEFAULT);//设置缓存模式

        //添加Javascript调用java对象
        content_wv.addJavascriptInterface(this, “java2js”);
        content_wv.setWebViewClient(new WebViewClientDemo());
        content_wv.setWebChromeClient(new WebViewChromeClientDemo());
        //设置打开的网页
        content_wv.loadUrl(“http://orgcent.com”);
        //使用WebView来显示图片
        content_wv.loadData(“<img src=’http://orgcent.com’/>”, “text/html”, “utf8”);
    }

    private class WebViewClientDemo extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            view.loadUrl(url);// 当打开新链接时，使用当前的 WebView，不会使用系统其他浏览器
            return true;
        }
    }

    private class WebViewChromeClientDemo extends WebChromeClient {

        // 设置网页加载的进度条
        public void onProgressChanged(WebView view, int newProgress) {

        }

        // 获取网页的标题
        public void onReceivedTitle(WebView view, String title) {

        }

        // JavaScript弹出框
        @Override
        public boolean onJsAlert(WebView view, String url, String message,
                JsResult result) {

            return super.onJsAlert(view, url, message, result);
        }

        // JavaScript输入框
        @Override
        public boolean onJsPrompt(WebView view, String url, String message,
                String defaultValue, JsPromptResult result) {

            return super.onJsPrompt(view, url, message, defaultValue, result);
        }

        // JavaScript确认框
        @Override
        public boolean onJsConfirm(WebView view, String url, String message,
                JsResult result) {

            return super.onJsConfirm(view, url, message, result);
        }
    }

}