之前接触过的webView只是了解,知道Android提供了webView组件,它本身就是浏览器的实现,内核基于开源的WebKit引擎。webView和普通的ImageView组件的用法基本类似,有大量的方法来执行浏览器操作,

比如 void goBack()后退

void goForward() 前进

void loadUrl(String url) 加载指定的Url对应的网页

boolean zoomln()放大网页

等等。

另外,webView也提供了架子html代码的方法loadData(String baseUrl,String mimeType ,String encoding。。。。).

现在因为接触到要加载html网页并且有交互,所以看了一下Android这块支持调用Android方法的webview。

使用webView中的javaScript调用Android

很多时候,webView加载页面是带的javaScript脚本,比如网页上有个按钮,用户点击按钮之后将会有相应,因为按钮是html页面上的,所以按钮只能激发一段javaScript脚本,这就需要javaScript脚本调用Android方法来实现响应。

为了让webView飞javaScript调用Android方法,webView提供了一个配套的webSettings工具类,该类提供了大量的方法来管理webView的选项设置。

WebView的javaScript中调用Android方法的步骤有三个:

1、调用webView关联的webSettings的setJavaScriptEnabled(true),启用javaScript调用功能

2、调用webView的addjavasriptInterface(Object object,String name)方法将object暴露给javaScript

3、在javaScript脚本中通过刚才暴露的name对象调用Android方法。

大概代码如下,不过完整代码在附件中可以下载。

activity

public class MainActivity extends Activity {

private WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView)findViewById(R.id.webview_s);
//加载本地的assets下 的testhtml文件,也可以加载网页或者服务器上的 网页

webView.loadUrl("file:///android_asset/test.html");
//获取websettings对象

WebSettings webSetting = webView.getSettings();
//启用javaScript功能

webSetting.setJavaScriptEnabled(true);
//将MyObject对象暴露给javaScript脚本,这样test.html网页 的javaScript就可以通过myObj来调用// MyObject的方法;

webView.addJavascriptInterface(new MyObject(this), "myObj");

}

}

//这个类就是自定义的,

public class MyObject {
Context mContext;
public MyObject (Context c){
mContext = c;
}
public void showToast(String name){
Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
}
}

test.html

按钮的 javaScript通过muObj来调用方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
.highlight{ background:#FF3300;
}
</style>
</head>

<body>
<div id="panel">
<h6 class="head">什么是jquery?</h6>
<div class="content">
JavaScript作为Web开发的客户端标准语言,逐渐被人们重视。由于JavaScript仅定义了
本的语法规范和逻辑结构,
</div>
</div>
<input type ="button" value = "打招呼" onclick ="myObj.showToast('eeee');"/>

</body>
</html>