温故而知新可以为师矣!
一、Native调用JS
Android端:
1、加载要交互的界面:WebView js_2_native_webview.loadUrl("http://192.168.1.40:8080/index.html");
2、 设置Web视图 :js_2_native_webview.setWebViewClient(new webClient());
3、调用js的方法:
native_2_JS_btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
js_2_native_webview.loadUrl("javascript:changeH5('from android')");
}
});
网页JS端:
<script>
//被Android调用的方法
function changeH5(s){
document.getElementById("js_btn").value=s;
}
</script>
流程:在JS端定义一个changeH5()的方法供Android端调用,调用的方式是:loadUrl("javascript:changeH5('from android')"); 其中form android“”为Android传给JS的数据,也可以不传,需要JS端做出相应的处理的话就在function changeH5()方法里面做处理,这里是改变js_btn的值。
二、JS调用Native
Android端:
1、加载要交互的界面:js_2_native_webview.loadUrl("http://192.168.1.40:8080/index.html");
2、 设置本地调用对象及其接口(被js调用的对象和接口):js_2_native_webview.addJavascriptInterface(new WebJSNativeInvoke(),"webObj");
被调用的对象的定义
public class WebJSNativeInvoke {
private Context mContxt;
// @JavascriptInterface //sdk17版本以上加上注解
// public WebJSNativeInvoke(Context mContxt) {
// this.mContxt = mContxt;
// }
/**
* 交互的function
*/
@JavascriptInterface
public void js_2_native(String resule) {
Toast.makeText(Js2NativeActivity.this, "交互成功了:"+resule, 0).show();
}
}
3、设置Web视图:js_2_native_webview.setWebViewClient(new webClient());
JS端:
<script>
//去调用Android的方法
function js_click(){
window.webObj.js_2_native("changed by JS");
}
</script>
流程:首先在Android端定义一个对象(WebJSNativeInvoke )供JS回调使用,之后设置该对象到"webObj"方法里addJavascriptInterface(new WebJSNativeInvoke(),"webObj");,JS端调用webObj对象的js_2_native()方法
,传输数据:“”changed by JS“”,Android端的对象WebJSNativeInvoke 里面的js_2_native()方法接受回调并作出处理。