什么是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手机中内置了一款高性能webkit内核浏览器,在SDK中封装成了WebView组件。

http://developer.android.com/guide/tutorials/views/hello-webview.html提供了一个简单的例子:

 

1. webview的XML定义:

<WebView  
        android:id="@+id/webview" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
    /> 

2.Manifest文件中权限的设定:

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

3.如果想要支持JavaScript:

    webview.getSettings().setJavaScriptEnabled(true); 

4.如果需要在WebView中显示网页,而不是在内置浏览器中浏览,则需要mWebView.setWebViewClient,并重写shouldOverrideUrlLoading方法。

5.如果不做任何处理,在显示你的Brower UI时,点击系统“Back”键,整个Browser会作为一个整体“Back"到其他Activity中,而不是希望的在Browser的历史页面中Back。如果希望实现在历史页面中Back,需要在当前Activity中处理Back事件:mWebView.goBack();

         WebView webview;
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		// 获取WebView对象
		webview = (WebView) findViewById(R.id.webview); 
		// 使能JavaScript
		webview.getSettings().setJavaScriptEnabled(true); 
		// 如果需要在WebView中显示网页,而不是在内置浏览器中浏览,
		// 则需要mWebView.setWebViewClient,并重写
		// shouldOverrideUrlLoading方法。
		webview.setWebViewClient(new WebViewClientDemo());
		// 加载网页
		webview.loadUrl("http://t.sina.cn/fesky");	
	}
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// 按下BACK键回到历史页面中
		if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { 
	        webview.goBack(); 
	        return true; 
	    } 
		return super.onKeyDown(keyCode, event);
	}
	private class WebViewClientDemo extends WebViewClient { 
	    @Override 
	    // 在WebView中而不是默认浏览器中显示页面
	    public boolean shouldOverrideUrlLoading(WebView view, String url) { 
	        view.loadUrl(url); 
	        return true; 
	    } 
	}

image

以上是采用loadUrl方法实现网页的加载,也可以采用loadData或者loadDataWithBaseURL方法实现网页的加载:

   webview.loadData(html, “text/html”, "utf-8”);

   如果html中包含中文,则需要webview.loadData(URLEncoder.encode(html,encoding), mimeType, encoding);

   对于本地图片或网页的显示,可以使用loadUrl,不过Url的地址前缀为file:///,如"file:///android_asset/test.htm”。

转载http://booby325.iteye.com/blog/1466263

6.如果页面中链接,如果希望点击链接继续在当前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.         });   


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

  看一个实例:

  1. public class WebViewDemo extends Activity {        
  2.     private WebView mWebView;       
  3.     private Handler mHandler = new Handler();       
  4.        
  5.     public void onCreate(Bundle icicle) {       
  6.         super.onCreate(icicle);       
  7.         setContentView(R.layout.webviewdemo);       
  8.         mWebView = (WebView) findViewById(R.id.webview);       
  9.         WebSettings webSettings = mWebView.getSettings();       
  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.                     }       
  17.                 });       
  18.             }       
  19.         }, "demo");       
  20.         mWebView.loadUrl("file:///android_asset/demo.html");       
  21.     }       
  22. }   

我们看addJavascriptInterface(Object obj,String interfaceName)这个方法,该方法将一个java对象绑定到一个javascript对象中,javascript对象名就是 interfaceName(demo),作用域是Global。这样初始化webview后,在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。来看看在html中是怎样调用的。

  1. <html>       
  2.         <mce:script language="javascript"><!--     
  3.        
  4.                 function wave() {       
  5.                     document.getElementById("droid").src="android_waving.png";       
  6.                 }       
  7.              
  8. // --></mce:script>       
  9.         <body>       
  10.             <a onClick="window.demo.clickOnAndroid()">       
  11.                                 <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>       
  12.                                 Click me!       
  13.             </a>       
  14.         </body>       
  15. </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的目的。

转载 http://blog.163.com/dangzhengtao@yeah/blog/static/7780087420110206341341/
Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐