WebView与js交互
2016-02-26 10:00
232 查看
我的歌声里
曲婉婷 - Everything In The World (白金庆功版)
背景:Android API中提供了WebView组件来实现对html的渲染。现在HTML5、CSS3、jS的相关开发技术,以及数据交换格式json/XML。Web开发工程师的技能。为了减少对android的过度依赖,通常会在原生的Android 嵌入部分的html了。
这样一来就避免不了为js数据交互。
我们新建一个简单的布局,只有一个webview控件
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
我们找到这个webView,并加上载本地的main.html,其中main.html存储在工程文件的assets根目录下。
WebView webView = (WebView) findViewById(R.id.webView);
webView.addJavascriptInterface(new
JSObject(context), "aikaifa");
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);// 支持js
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
webView.loadUrl("file:///android_asset/main.html");
}
}, 500);
1js调用Android方法
细心的你应该会注意到上面有个JSObject类,没错,就是这个开启了入口,前端js 才可以调用我们Android这边写的方法。其中的“aikaifa” 可以理解成一个标示,可以随便改成你喜欢的。
我们来看一下JSObject
这个类:
public class JSObject {
private Context context;
public JSObject(Context context){
this.context=context;
}
@JavascriptInterface
public void goBack({
Activity activity = (Activity) context;
activity.finish();
}
}
该类定义了goBack方法,注入JS可以调用。
js如果想要调用goBack这个方法。可以这个aikaifa.goBack() 这样调用即可。
这样前端就可以很方便调用我们Android这边的方法了。
2Android调用JS方法
既然js可以调用我们的方法,那我们同样也调用js方法
例如我们想调用js 中getName方法。
我们可以这样写。
public void getTestJS()
{
Timer timer = new Timer();
final Handler handler = new Handler(){
public void handleMessage(Message msg) {
switch (msg.what) {
case 1:
webView.loadUrl("javascript:getName()");
break;
}
super.handleMessage(msg);
}
};
timer.schedule(new TimerTask() {
public void run() {
Message msg = new Message();
msg.what = 1;
handler.sendMessage(msg);
}
}, 500, 500);
}
其中getName方法是js中的一个方法,我们可以在需要的地方调用getTestJS方法就可以了。
这样WebView与js交互就大致完成了。
我的歌声里
曲婉婷 - Everything In The World (白金庆功版)
背景:Android API中提供了WebView组件来实现对html的渲染。现在HTML5、CSS3、jS的相关开发技术,以及数据交换格式json/XML。Web开发工程师的技能。为了减少对android的过度依赖,通常会在原生的Android 嵌入部分的html了。
这样一来就避免不了为js数据交互。
我们新建一个简单的布局,只有一个webview控件
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
我们找到这个webView,并加上载本地的main.html,其中main.html存储在工程文件的assets根目录下。
WebView webView = (WebView) findViewById(R.id.webView);
webView.addJavascriptInterface(new
JSObject(context), "aikaifa");
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);// 支持js
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
webView.loadUrl("file:///android_asset/main.html");
}
}, 500);
1js调用Android方法
细心的你应该会注意到上面有个JSObject类,没错,就是这个开启了入口,前端js 才可以调用我们Android这边写的方法。其中的“aikaifa” 可以理解成一个标示,可以随便改成你喜欢的。
我们来看一下JSObject
这个类:
public class JSObject {
private Context context;
public JSObject(Context context){
this.context=context;
}
@JavascriptInterface
public void goBack({
Activity activity = (Activity) context;
activity.finish();
}
}
该类定义了goBack方法,注入JS可以调用。
js如果想要调用goBack这个方法。可以这个aikaifa.goBack() 这样调用即可。
这样前端就可以很方便调用我们Android这边的方法了。
2Android调用JS方法
既然js可以调用我们的方法,那我们同样也调用js方法
例如我们想调用js 中getName方法。
我们可以这样写。
public void getTestJS()
{
Timer timer = new Timer();
final Handler handler = new Handler(){
public void handleMessage(Message msg) {
switch (msg.what) {
case 1:
webView.loadUrl("javascript:getName()");
break;
}
super.handleMessage(msg);
}
};
timer.schedule(new TimerTask() {
public void run() {
Message msg = new Message();
msg.what = 1;
handler.sendMessage(msg);
}
}, 500, 500);
}
其中getName方法是js中的一个方法,我们可以在需要的地方调用getTestJS方法就可以了。
这样WebView与js交互就大致完成了。
相关文章推荐
- 《从零开始学Swift》学习笔记(Day 70)——Swift与Objective-C混合编程之Swift与Objective-C API映射
- 获取APP的Launch Image
- ioS开发知识(二十二)
- Android主线程中延时处理
- 窥探Swift编程之错误处理与异常抛出
- Ios设定地图不规则范围及火星坐标转百度坐标
- ioS开发知识(二十一)
- 下载并在Eclipse中关联Android源代码
- android 5.0之cardview
- 全系列Unity4.x.x到5.3.2f1破解Win&Mac!最新Unity5.3.2p4&4.7破解!
- APP设计和切图基本知识点以及注意事项【APP设计干货】
- Unity3D Shader官方教程翻译(二)
- 从 android 谈重构
- iOS 设计模式 - 适配器模式
- Android开发之关于项目
- iOS中arc的设置与使用
- Android中Parcel的分析以及使用
- IOS多线程相关知识
- Building Android Apps 30条建议
- Ios录音功能