android webview 初学实例-页面JS与后台交互

借鉴一下别人的说的，确实有道理，对自己有点小明白。

什么是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对象。

下面直接上代码，有注释，复制可用

布局XML只是加入一个webview 控件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/hello_world"/>

</RelativeLayout>

后台activity代码：

import android.os.Bundle;
import android.os.Handler;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.util.Log;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.Window;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

@SuppressLint("JavascriptInterface")
public class MainActivity extends Activity {

	private  WebView webView;    
	 private Handler mHandler = new Handler();
	 
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 去掉标题
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		webView = (WebView)this.findViewById(R.id.webView1);
		// 设置支持Javascript
		webView.getSettings().setJavaScriptEnabled(true);
		// 触摸焦点起作用
		webView.requestFocus();
		// 取消滚动条
		webView.setScrollBarStyle(webView.SCROLLBARS_OUTSIDE_OVERLAY);
		// 要显示的网页
		webView.loadUrl("file:///android_asset/index.html");
		
		webView.setWebViewClient(new WebViewClient(){
			public void onPageFinished(WebView view, String url){ 
				System.out.println("------onPageFinished--------");
			} 
			
			public boolean shouldOverrideUrlLoading(WebView view, String url) {       
				if(url.indexOf("tel:")<0){//页面上有数字会导致连接电话  
		            view.loadUrl(url);  
		        }  
		        return true;     
            }    
		});
		
		// 想获取页面的一些处理数据
		webView.setWebChromeClient(new MyWebChromeClient());
		
		// 页面事件
		webView.addJavascriptInterface(new Object(){
			public void clickOnAndroid() {       
                mHandler.post(new Runnable() {       
                    public void run() {       
                    	webView.loadUrl("javascript:wave()");       
                    }       
                });       
            }
			public void clickOnAndroid2(final String order) {       
                mHandler.post(new Runnable() {       
                	 public void run(){  
                        String jsonText="{'name':'"+order+"'}";  
                        webView.loadUrl("javascript:wave2("+jsonText+")");  
			         }        
                });       
            }
		}, "demo");
	}

	@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;
	}
	/**
	 * 如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身
	 * 如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件
	 */
	@Override
	public boolean onKeyDown(int keyCoder,KeyEvent event){  
        if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){  
        	webView.goBack();   //goBack()表示返回webView的上一页面  
            return true;  
         } 
         return false;  
	} 
}

final class MyWebChromeClient extends WebChromeClient{  
    	@Override  
    	public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {   
		//message就是wave函数里alert的字符串，这样你就可以在android客户端里对这个数据进行处理  
    		System.out.println("-----message--------"+message);
            result.confirm();     
            return true;    
        }
} 

前端 html :

<!DOCTYPE html>
<html>
  <head>
    <title>index.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  	<script type="text/javascript">
	function toclient(){
	    var order=document.getElementById("val").value;
		window.demo.clickOnAndroid2(order); // 对应后台的方法
	}
	   
    function wave2(str){
    	alert(str.name);
       document.getElementById("fromclient").value = str.name;
    }
    
    function wave(){       
       var _src = document.getElementById("val").value ;
       if(_src == '1'){
       		document.getElementById("droid").src ="160.png";  
       		document.getElementById("val").value = '0'; 
       }else{
       		document.getElementById("val").value = '1'; 
       		document.getElementById("droid").src ="161.png";  
       }
    } 
	</script>
  </head>
  <body>
    This is my HTML page. <br>
    <a href="index2.html" >1360****151</a>
	    输入一个字符串：<br/>
	  <input id="val" />
	        <input type="button" value="点击提交给客户端"
	        onClick="toclient();"/>
	      <br /> 
	        显示返回：<input id="fromclient" />
	        <br><br>
	        <a onClick="window.demo.clickOnAndroid()">       
                                <img id="droid" src="160.png"  /><br>       
                                Click me!       
            </a
  </body>
</html>

运行起来一看就知道了....