WebView 与 JS 之间的关系

来源：互联网发布：淘宝商城平板电脑编辑：程序博客网时间：2024/06/05 23:56

最近公司做在移动办公项目，采用HTML5，CSS和JS制作界面，然后通过Android的控件webView来加载界面，这是最近移动开发中刚刚兴起的，类似的产品有twitter，facebook，twitter的界面几乎跟Android原生的界面差不多，获得了成功，而facebook却惨败，虽然目前体验一直很差，界面一直有问题，但还是希望我们公司能够获得成功吧。

好了，废话不多说了，现在开始介绍 Android WebView 如何与HTML进行交互？

在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已经基本上混用不分(例如GoogleChrome 和Maxthon 3 采用V8 引擎,却仍然宣称自己是WebKit 内核).

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

[java] view plaincopy
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] view plaincopy
<span style="font-size:18px;"><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></span>  

这样在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 的目的.

（3）AndroidManifest.xml 中必须使用许可"android.permission.INTERNET",否则会出Web page not available 错误

（4）如果访问的页面中有Javascript,则WebView 必须设置支持Javascript.

WebView.getSettings().setJavaScriptEnabled(true);
（5）如果页面中链接,如果希望点击链接继续在当前browser 中响应,而不是新开Android 的系统browser 中响应该链接,必须覆盖WebView 的WebViewClient 对象.

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

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

[java] view plaincopy
public boolean onKeyDown(int keyCode, KeyEvent event) {  
 if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {  
              mWebView.goBack();  
              return true;  
  }  
 return super.onKeyDown(keyCode, event);  
 }    

Webkit和 webview

1.WebKit 所包含的WebCore 排版引擎和 JSCore 引擎

WebKit内核在手机上的应用也十分广泛，例如 Google 的手机 Android、 Apple 的 iPhone, Nokia’s Series 60 browser等所使用的 Browser 内核引擎，都是基于 WebKit。在SDK 中封装为一个叫做WebView 组件。

　　WebKit是开源的Web浏览器引擎，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。WebKit还支持移动设备和手机，包括iPhone和Android手机都是使用WebKit做为浏览器的核心。

Webkit内核在Windows上发展最晚，Safari(forWindows)，Midori，Google chrome，具有双核模式的傲游3和搜狗浏览器2（高速模式下使用Webkit核心）是最为常见的Webkit浏览器。2009年推出的safari和Chrome以及2010年推出的搜狗浏览器V2.0Beta和傲游3.0beta都使用的webkit引擎完全通过了 acid3测试满分！

现在浏览器的内核引擎，基本上是四分天下：

　　Trident: IE以Trident 作为内核引擎;

　　Gecko: Firefox 是基于Gecko 开发;

　　WebKit: Safari,Google Chrome,傲游3 基于 Webkit 开发。

　　Presto:Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini

现在WebKit和WebCore已经基本上混用不分(例如GoogleChrome 和Maxthon 3 采用V8 引擎,却仍然宣称自己是WebKit 内核).