WebView 与 JS 之间的关系

来源：互联网发布：中电海康研究院知乎编辑：程序博客网时间：2024/06/04 20:07

最近公司做在移动办公项目，采用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 就可以为所欲为了.

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><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>

这样在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 对象.

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

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

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

好了，今天就说到这儿了，明天还要继续上班呢...