WebView的详细介绍

webview的简介:

在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内核)。
 


WebView基本使用

WebView是View的一个子类,可以让你在activity中显示网页。
  可以在布局文件中写入WebView:比如下面这个写了一个填满整个屏幕的WebView:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

加载一个网页,使用loadUrl()

注意:使用的时候如果是访问网络链接,那么切记要加上前面的http: 前缀,否则会提示找不到该网页. 

列如:www.example.com 是不行的,要改成:http://www.example.com(以上错误一般新手都会犯)

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl(http://www.example.com);

注意要在manifest中加上访问网络的权限:

<manifest ... > 
    <uses-permission android:name="android.permission.INTERNET" /> 
    ... 
</manifest>



设置WebView要显示的网页:


互联网页面直接用:

myWebView.loadUrl(“http://www.google.com“);

本地文件用(本地文件存放在:assets文件中):

myWebView.loadUrl(“file:///android_asset/XX.html“); 

还可以直接载入html的字符串,如:

String htmlString = "<h1>Title</h1><p>This is HTML text<br /><i>Formatted in italics</i><br />Anothor Line</p>";
// 载入这个html页面
myWebView.loadData(htmlString, "text/html", "utf-8");


当WebView需要嵌入Cookie的时候,就用这个方法:

loadUrl(Stringurl, Map<String, String> additionalHttpHeaders)使用这个方法可以在加载网页时带HttpHeaders。


WebView Post请求方式:

 postUrl(Stringurl, byte[] postData)请求网页时带有post数据

//    post方式传送参数  
    String postData = "clientID = cid & username = name";  
    webview.postUrl(url, EncodingUtils.getBytes(postData, "base64"));  


这个可以使html页面适应屏幕大小:

<span style="white-space:pre">	</span>final String mimetype = "text/html";  
        final String encoding = "utf-8";  
          
        WebView wv;  
          
        wv = (WebView) findViewById(R.id.wv);  
        wv.loadData("<a href ='http://blog.csdn.net/imyang2007?viewmode=contents'>Young's Blog</a>", mimetype, encoding); 

 


webview在android 点击链接是在本页跳转的事件处理:


1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
    2.如果访问的页面中有Javascript,则webview必须设置支持Javascript。
        webview.getSettings().setJavaScriptEnabled(true);  
    3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 webview的WebViewClient对象。

 所有的链接都在webview中打开:

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


将特定的链接用自己的WebView打开,其他链接用浏览器(intent启动了默认的处理URL的Activity)

// 在WebView中打开链接(默认行为是使用浏览器,设置此项后都用WebView打开)
        // myWebView.setWebViewClient(new WebViewClient());
        // 这样设置后所有的链接都会在当前WebView中打开

        // 更强的打开链接控制:自己覆写一个WebViewClient类:除了指定链接从WebView打开,其他的链接默认打开
        myWebView.setWebViewClient(new MyWebViewClient());

    }

    /**
     * 自定义的WebViewClient类,将特殊链接从WebView打开,其他链接仍然用默认浏览器打开
     * 
     * @author 1
     * 
     */
    private class MyWebViewClient extends WebViewClient
    {
<span style="background-color: rgb(250, 250, 250); "><span style="white-space: pre; ">	</span>对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法,并传递参数:按下的url</span>
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url)
        {
            if (Uri.parse(url)
                    .getHost()
                    .equals("http://www.cnblogs.com/mengdd/archive/2013/02/27/2935811.html")
                    || Uri.parse(url).getHost()
                            .equals("http://music.baidu.com/"))
            {
                // This is my web site, so do not override; let my WebView load
                // the page

                // 这是官网上的例子,但是我点击特定链接的时候仍然是用浏览器而不是用自己的WebView打开,加上下面这句view.loadUrl(url)仍然是用浏览器,无解,不知道哪里出了问题
                // view.loadUrl(url);
                return false;
            }
            // Otherwise, the link is not for a page on my site, so launch
            // another Activity that handles URLs
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);
            return true;
        }
    }



webview 与 javascript的交互:

如果你想要载入的页面中用了JavaScript,你必须为你的WebView使能JavaScript。


  一旦使能之后,你也可以自己创建接口在你的应用和JavaScript代码间进行交互。


使能JavaScript


  可以通过getSettings()获得WebSettings,然后用setJavaScriptEnabled()使能JavaScript:

<span style="white-space:pre">	</span>WebView myWebView = (WebView) findViewById(R.id.webview);
<span style="white-space:pre">	</span>WebSettings webSettings = myWebView.getSettings();
<span style="white-space:pre">	</span>webSettings.setJavaScriptEnabled(true);

WebSettings中提供了很多有用的设置。



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


public class WebViewDemo extends Activity {        
    private WebView mWebView;       
    private Handler mHandler = new Handler();       
       
    public void onCreate(Bundle icicle) {       
        super.onCreate(icicle);       
        setContentView(R.layout.webviewdemo);       
        mWebView = (WebView) findViewById(R.id.webview);       
        WebSettings webSettings = mWebView.getSettings();       
        webSettings.setJavaScriptEnabled(true);       
        mWebView.addJavascriptInterface(new Object() {       
            public void clickOnAndroid() {       
                mHandler.post(new Runnable() {       
                    public void run() {       
                        mWebView.loadUrl("javascript:wave()");       
                    }       
                });       
            }       
        }, "demo");       
        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中的代码:

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


实例2:

在WebView中不仅可以运行HTML代码,更重要的是,WebView可以与Javascript互相调用。也就是说,在Javascript中可以获取WebView的内容,与此同时,在WebView中也可以调用Javascript里面的方法。


  下面就来说说如何在WebView中调用Javascript里面的方法。


  这里,我使用了百度地图的API接口(一份内嵌了Javascript的HTML文档),在该接口中提供如下的Javascript方法:

/*********************************/
    /*           查找地点            */
    /*********************************/
    var city = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});   
    
    function findPlace(place)
    {
        city.search(place);
  }

   我们要做的就是在WebView中调用findPlace()方法,完成地点的查找。在WebView中调用Javascript里面的方法是通过代码WebView.loadUrl(“javascript:方法名()”)来实现的。如下的代码,从EditText控件中获得用户想要查找的地名,然后调用了Javascript中的findPlace()方法,进行查找。


/*
     * Function  :    点击事件处理
     * Author    :    博客园-依旧淡然
     */
    public void onClick(View view) {
        switch(view.getId()) {
        case R.id.imagebutton_search:                    //查找地名
            String str = mEditText_input.getText().toString();
            String url = "javascript:findPlace('" + str + "')";
            mWebView.loadUrl(url);
            break;
        }
    }


注意:

1)为了让WebView从apk文件中加载assets,Android SDK提供了一个schema,前缀为"file:///android_asset/"。WebView遇到这样的schema,就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/demo.html" 
2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中,不能运行在构造他的线程中,这也是使用 Handler的目的。


webview 与 javascript的数据交互:

通过setsetWebChromeClient() 我们可以捕获到javascript中的弹框 ,如:alert()警告对话框,confirm() 确定对话框,prompt() 输入对话框. 而且还可以获得对话框

       中的内容.


extra_web.setWebChromeClient(new WebChromeClient() {
<span style="white-space:pre">			   // ,我们将websit下载的进度同步到acitity的进度条上。   </span>
			public void onProgressChanged(WebView view, int newProgress) {   
				// activity的进度是0 to 10000 (both inclusive),所以要*100   
				activity.setProgress(newProgress * 100);   
			}   

			@Override
			public boolean onJsAlert(WebView view, String url, String message,

					final JsResult result) {
<span style="color: rgb(51, 51, 51); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(250, 250, 250); "><span style="white-space:pre">								</span>//message就是wave函数里alert的字符串,这样你就可以在android客户端里对这个数据进行处理</span>
				AlertDialog.Builder builder = new AlertDialog.Builder(ExtraApproveWebActivity.this);
				builder.setMessage(message).setNeutralButton("确定", new OnClickListener() {

					public void onClick(DialogInterface arg0, int arg1) {
						//			                    	finish();
						arg0.dismiss();
					}

				}).show();

				result.cancel();
				return true;
			}

			@Override
			public boolean onJsConfirm(WebView view, String url,
					String message, final JsResult result) {
				// TODO Auto-generated method stub
				return true;
			}
		});

打开页面时, 自适应屏幕:

WebSettings webSettings =   mWebView .getSettings();       
webSettings.setUseWideViewPort(true);//设置此属性,可任意比例缩放
webSettings.setLoadWithOverviewMode(true);


便页面支持缩放:

WebSettings webSettings =   mWebView .getSettings();       
webSettings.setJavaScriptEnabled(true);  
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);


如果webView中需要用户手动输入用户名、密码或其他,则webview必须设置支持获取手势焦点

webview.requestFocusFromTouch();





浏览网页历史回退

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

当你的WebView覆写了URL载入的行为,它会自动地对访问过的网页积累一个历史,你可以利用 goBack() 和 goForward()方法在这个历史中前进或后退。

比如说使用后退键进行网页后退:

/**
     * 按键响应,在WebView中查看网页时,按返回键的时候按浏览历史退回,如果不做此项处理则整个WebView返回退出
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
        // Check if the key event was the Back button and if there's history
        if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack())
        {
            // 返回键退回
            myWebView.goBack();
            return true;
        }
        // If it wasn't the Back key or there's no web page history, bubble up
        // to the default
        // system behavior (probably exit the activity)
        return super.onKeyDown(keyCode, event);
    }

 canGoBack() 方法在网页可以后退时返回true。

  类似的,canGoForward()方法可以检查是否有可以前进的历史记录。

  如果你不执行这种检查,一旦 goBack() 和 goForward()方法到达历史记录顶端,它们将什么也不做。

  如果不加这种设置,在用户按下Back键时,如果是WebView显示网页,则会将WebView作为整体返回。



----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

WebSettings 的常用方法介绍 

WebSettings 对象的获取:

WebSettings webSettings =   mWebView .getSettings();  
<pre style="font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255); ">setDefaultTextEncodingName("UTF-8"); //设置字符编码
setJavaScriptEnabled(true); //支持jssetPluginsEnabled(true); //支持插件 setUseWideViewPort(false); //将图片调整到适合webview的大小 setSupportZoom(true); //支持缩放 setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局 supportMultipleWindows(); //多窗口 setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 setAllowFileAccess(true); //设置可以访问文件 setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点webview webSettings.setBuiltInZoomControls(true); //设置支持缩放 setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 setLoadWithOverviewMode(true); // 缩放至屏幕的大小setLoadsImagesAutomatically(true); //支持自动加载图片
 

WebViewClient 的方法全解 :

doUpdateVisitedHistory(WebView view, String url, boolean isReload)  //(更新历史记录) 

onFormResubmission(WebView view, Message dontResend, Message resend) //(应用程序重新请求网页数据) 

onLoadResource(WebView view, String url) // 在加载页面资源时会调用,每一个资源(比如图片)的加载都会调用一次。 

onPageStarted(WebView view, String url, Bitmap favicon) //这个事件就是开始载入页面调用的,通常我们可以在这设定一个loading的页面,告诉用户程序在等待网络响应。 

onPageFinished(WebView view, String url) //在页面加载结束时调用。同样道理,我们知道一个页面载入完成,于是我们可以关闭loading 条,切换程序动作。 

onReceivedError(WebView view, int errorCode, String description, String failingUrl)// (报告错误信息) 

onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm)//(获取返回信息授权请求) 
 
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) //重写此方法可以让webview处理https请求。
 
onScaleChanged(WebView view, float oldScale, float newScale) // (WebView发生改变时调用) 

onUnhandledKeyEvent(WebView view, KeyEvent event) //(Key事件未被加载时调用) 

shouldOverrideKeyEvent(WebView view, KeyEvent event)//重写此方法才能够处理在浏览器中的按键事件。 

shouldOverrideUrlLoading(WebView view, String url) 
//在点击请求的是链接是才会调用,重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边。这个函数我们可以做很多操作,比如我们读取到某些特殊的URL,于是就可以不打开地址,取消这个操作,进行预先定义的其他操作,这对一个程序是非常必要的。

setWebChromeClient主要处理解析,渲染网页等浏览器做的事情

WebChromeClient是辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等 

onCloseWindow(关闭时调用) 

onCreateWindow()  (打开网页窗体时调用)

onJsAlert (WebView上alert是弹不出来东西的,需要定制你的WebChromeClient处理弹出) 

onJsPrompt  (捕获网页上的js 输入框)

onJsConfirm  (捕获网页上的js 确定框)

onProgressChanged  (网页进度条的改变)

onReceivedIcon  (网页图标的设置)

onReceivedTitle  (网页标题的设置)





WebView里面的一些方法:

webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);     //(取消滚动条)

webview.requestFocus();   //(当网页上需要手动输入时,获取焦点)

webview.addJavascriptInterface(obj, interfaceName)   //(调用网页里面的javascript,实现互相通信)

 




相关webview的学习网址:《http://www.cnblogs.com/aimeng/archive/2012/05/24/2516547.html》


demo源码下载

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值