现在很多app里面很多功能都用html5实现,也就是用webview加载html显示一些 图文信息。这么做的好处就是减少开发成本 ,一套html在android ,ios及web都可以跑。节省了很多开发成本。但是这个也就带来相应的一些问题。最大问题就是交互问题。所以下面给大家说一下android和js怎么实现交互(android调用js中的方法,js里面调用android的方法)。
一.js调用android
webview设置
代码语言:javascript复制//设置编码
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
//支持js
mWebView.getSettings().setJavaScriptEnabled(true);
//设置本地调用对象及其接口
mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");
//载入js
mWebView.loadUrl("file:///android_asset/test.html");
方法声明:
代码语言:javascript复制class JavaScriptObject {
Context mContxt;
public JavaScriptObject(Context mContxt) {
this.mContxt = mContxt;
}
@JavascriptInterface
public void getAndroidMethod(String name) {
Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
}
}
html中js调用
代码语言:javascript复制<script>
function funFromjs(){
document.getElementById("mydiv").innerHTML="android调用了js的方法";
}
var aTag = document.getElementsByTagName('a')[0];
aTag.addEventListener('click', function(){
//调用android本地方法
myObj.getAndroidMethod("js调用了android的方法!");
return false;
}, false);
</script>
测试的test.html放到android的assets目录下面。
二.android调用js
android 调用js 客户端代码:
代码语言:javascript复制mWebView.loadUrl("javascript:funFromjs()");
funFromjs这个函数 是在html里面的js 声明好的。 大家看上面的代码里面有这个函数。
三.特别注意的地方
总的来说很简单,但是有两点需要特别注意的。
第一点
代码语言:javascript复制mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");
代码语言:javascript复制myObj.getAndroidMethod("js调用了android的方法!");
js代码里面的 myObj 不用特殊定义一个对象 ,这个对象是在android webview加载html时候注入的对象,可以认为他们俩就是一个对象。
第二点@JavascriptInterface
大家注意在android 声明出来的方法前面 要加上这个javasriptInterface 注解,否则会报Uncaught TypeError: Object [object Object] has no method... 这个错误。
正常需要判断为 targetSdkVersion>=17时,需要加上@JavascriptInterface,所以target=android-17或更高以便引入高版本android.jar。反之,如果仅targetSdkVersion低于17,那么目标版本不用加@JavascriptInterface,当然加上也行。
所以大家直接加上就可以。
这个交互的demo我已经上传 下载地址
如果大家还有其它问题或者不同意见,可以评论