借鉴一下别人的说的,确实有道理,对自己有点小明白。
什么是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>
运行起来一看就知道了....