Android中js与本地方法进行相互调用
2017-09-06 10:06
561 查看
最近项目中用到HTML5,app和Html5的交互,就是webview和js的交互,当然如果是纯网页的话,直接就用webview加载下就好了。
在这里说到的是app和HTML的混合开发:
webview 首先要支持js
[html] view
plain copy
print?
webView.getSettings().setJavaScriptEnabled(true);//添加对JavaScript支持
加载网页
[html] view
plain copy
print?
webView.loadUrl("http://192.168.1.90:8080/WT/position-app/position-list.html");
1.native如何调用js?
(1)这得仰仗webView.addJavascriptInterface();这个方法,JavascriptInterface是建立和js连接的桥梁
[html] view
plain copy
print?
webView.addJavascriptInterface(new AndroidJavaScript(context), "Position");
这个方法有2个参数
第一个参数告诉webview,我要用这个类来跟js进行交互
第二个参数随便写,就相当于在js中我们交互类的标签。但是,一定要和网页上js代码中的调用保持一致
(2)下面我们来看看定义的native和js交互的类如何写:
[html] view
plain copy
print?
public class AndroidJavaScript {
private Context context;
public AndroidJavaScript(Context context){
this.context = context;
}
@JavascriptInterface
public void jumpNext() {
Intent intent = new Intent(context, PositionSelectActivity.class);
intent.putExtra("startTo", "searchOfpositionFragment");
context.startActivity(intent);
((Activity) context).finish();
}
}
用于交互的方法 上一定要加注解 @JavascriptInterface
(3)js 调用 native的代码
[html] view
plain copy
print?
<script type="text/javascript">
var basePath = "<%=basePath%>";
function search(){
window.Position.jumpNext();
}
</script>
童鞋们注意啦:window.Position.jumpNext()这句代码中的Position要与webView.addJavascriptInterface(new AndroidJavaScript(context),"Position")中的"Position"保持一致。
这样才能调到哦。
2.natvie调用js代码
这个一句代码就能搞定
(1)js代码:
[html] view
plain copy
print?
function show(id){
alert("调用js的代码"+id);
}
(1)本地的调用方法
[html] view
plain copy
print?
webView.loadUrl("javascript:QueryPositon('"+45+"')");
但是只写着一行代码的话会出现网页还没加载完就去调用方法的情况所以要监听网页加载完毕
[html] view
plain copy
print?
webView.setWebViewClient(webviewClient);
[html] view
plain copy
print?
WebViewClient webviewClient = new WebViewClient(){
public void onPageFinished(WebView view, String url){
webView.loadUrl("javascript:show('"+45+"')");
};
};
这样简单完成js和webview的交互
深扒的话:(1)Android和js交互有一个好的框架 jsbridge
(2)honegap开发:不用android的布局了,直接把html放到app里当界面 然后用js 交互
补充布局
[html] view
plain copy
print?
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
/>
在这里说到的是app和HTML的混合开发:
webview 首先要支持js
[html] view
plain copy
print?
webView.getSettings().setJavaScriptEnabled(true);//添加对JavaScript支持
加载网页
[html] view
plain copy
print?
webView.loadUrl("http://192.168.1.90:8080/WT/position-app/position-list.html");
1.native如何调用js?
(1)这得仰仗webView.addJavascriptInterface();这个方法,JavascriptInterface是建立和js连接的桥梁
[html] view
plain copy
print?
webView.addJavascriptInterface(new AndroidJavaScript(context), "Position");
这个方法有2个参数
第一个参数告诉webview,我要用这个类来跟js进行交互
第二个参数随便写,就相当于在js中我们交互类的标签。但是,一定要和网页上js代码中的调用保持一致
(2)下面我们来看看定义的native和js交互的类如何写:
[html] view
plain copy
print?
public class AndroidJavaScript {
private Context context;
public AndroidJavaScript(Context context){
this.context = context;
}
@JavascriptInterface
public void jumpNext() {
Intent intent = new Intent(context, PositionSelectActivity.class);
intent.putExtra("startTo", "searchOfpositionFragment");
context.startActivity(intent);
((Activity) context).finish();
}
}
用于交互的方法 上一定要加注解 @JavascriptInterface
(3)js 调用 native的代码
[html] view
plain copy
print?
<script type="text/javascript">
var basePath = "<%=basePath%>";
function search(){
window.Position.jumpNext();
}
</script>
童鞋们注意啦:window.Position.jumpNext()这句代码中的Position要与webView.addJavascriptInterface(new AndroidJavaScript(context),"Position")中的"Position"保持一致。
这样才能调到哦。
2.natvie调用js代码
这个一句代码就能搞定
(1)js代码:
[html] view
plain copy
print?
function show(id){
alert("调用js的代码"+id);
}
(1)本地的调用方法
[html] view
plain copy
print?
webView.loadUrl("javascript:QueryPositon('"+45+"')");
但是只写着一行代码的话会出现网页还没加载完就去调用方法的情况所以要监听网页加载完毕
[html] view
plain copy
print?
webView.setWebViewClient(webviewClient);
[html] view
plain copy
print?
WebViewClient webviewClient = new WebViewClient(){
public void onPageFinished(WebView view, String url){
webView.loadUrl("javascript:show('"+45+"')");
};
};
这样简单完成js和webview的交互
深扒的话:(1)Android和js交互有一个好的框架 jsbridge
(2)honegap开发:不用android的布局了,直接把html放到app里当界面 然后用js 交互
补充布局
[html] view
plain copy
print?
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
/>
相关文章推荐
- React Native:JS调用Android本地方法
- WebView中Js与Android本地函数的相互调用
- Android 使用html做UI的方法---js与java的相互调用
- HTML---Android中调用js方法及js中调用本地方法
- JS和Android本地方法之间的调用
- JS怎样调用Android本地原生方法
- 2011/06/13 android使用html做UI的方法---js与java的相互调用
- Android WebView的使用方法及与JS 相互调用
- Js 调用 android 本地方法 并传入参数
- android之通过webview实现与js方法相互调用,数据交互
- Android-本地方法与Java相互调用-自定义ProgressBar(锅炉压力监测例子)/NDK-JNI开发实例(七)
- Android中调用js方法及js中调用本地方法
- (js)JavaScript调用本地android的方法
- 2011/06/13 android使用html做UI的方法---js与java的相互调用
- android和JS交互,相互调用方法传值。不使用第三方实现原生加载word、ppt、pdf文档
- 2011/06/13 android使用html做UI的方法---js与java的相互调用
- js 调用本地方法时兼容Android和Ios
- Android与JavaScript方法相互调用!
- Android界面之----自定义的Dialog,然后利用回调方法,在调用处,进行Dialog中各按钮的事件处理。
- Android ---js与java的相互调用