十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
您好,很高兴能帮助您,
创新互联主营巩义网站建设的网络公司,主营网站建设方案,app软件开发,巩义h5微信小程序搭建,巩义网站营销推广欢迎巩义等地区企业咨询
Android中webview和js之间的交互
1.android中利用webview调用网页上的js代码。
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true,,然后通过loadUrl就可以直接进行调用,如下所示:
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript:test()");
2. 网页上调用android中java代码的方法
在网页中调用java代码,需要在webview控件中添加javascriptInterface。如下所示:
mWebView.addJavascriptInterface(new Object() {
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();
}
});
}
}, "demo");
在网页中,只需要像调用js方法一样,进行调用就可以
div id='b'a onclick="window.demo.clickOnAndroid()"b.c/a/div
3. Java代码调用js并传参
首先需要带参数的js函数,如function test(str),然后只需在调用js时传入参数即可,如下所示:
mWebView.loadUrl("javascript:test('aa')");
4.Js中调用java函数并传参
首先一样需要带参数的函数形式,但需注意此处的参数需要final类型,即得到以后不可修改,如果需要修改其中的值,可以先设置中间变量,然后进行修改。如下所示:
mWebView.addJavascriptInterface(new Object() {
public void clickOnAndroid(final int i) {
mHandler.post(new Runnable() {
public void run() {
int j = i;
j++;
Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
}
});
}
}, "demo");
然后在html页面中,利用如下代码div id='b'a onclick="window.demo.clickOnAndroid(2)"b.c/a/div,
即可实现调用
你的采纳是我前进的动力,还有不懂的地方,请你继续“追问”!
如你还有别的问题,可另外向我求助;答题不易,互相理解,互相帮助!
在Android的开发过程中、遇到一个新需求、那就是让Java代码和Javascript代码进行交互、在IOS中实现起来很麻烦、而在Android中相对来说容易、Android对这种交互进行很好的封装、其实可以很简单的用Java代码调用WebView中的js函数、也可以用WebView中的js来调用Android应用中的Java代码
一、网页的JS代码调用ANDROID中JAVA代码的方法
在网页中调用java代码、需要在webview控件中添加javascriptInterface
contentWebView = (WebView) findViewById(R.id.webview);
//启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
contentWebView.addJavascriptInterface(this, "js对象名");
在Activity中定义一个要被js调用的方法、src为js传递过来的参数、如果没有不传也可以的。
public void jsFunction(final String str) {
Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
runOnUiThread(new Runnable() {
@Override
public void run() {
//在里对Android应用的UI进行处理
}
});
}
在网页中、只需要像调用js方法一样、进行调用就可以
a onClick="window.js对象名.jsFunction(´hello world´)"
点击调用java代码并传递参数
/a
二、ANDROID中JAVA代码调用网页的JS代码的方法
Java代码调用js并传参其实是通过WebView的loadUrl方法去调用的、只是参数url的写法不一样
// 无参数调用
contentWebView.loadUrl("javascript:javacalljs()");
// 传递参数调用
contentWebView.loadUrl("javascript:javacalljswithargs("
+ "´hello world´" + ")");
三、JAVA和JS交互注意事项
1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方法、速度很快、50ms左右、所以尽量用js调用Java方法
2、Java 调用 js 的函数、没有返回值、调用就控制不到
3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString() 函数就可以、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间
4、网页中尽量不要使用jQuery、执行起来需要5-6秒、最好使用原生的js写业务脚本、以提升加载速度、改善用户体验
一、对于Android和ios我们要执行不同的操作,下面是判断系统的js代码
// alert(ismobile(1)); 1表示Android,0表示ios
function ismobile(test){
var u = navigator.userAgent, app = navigator.appVersion;
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")lt;0){
try{
if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
return '0';
}else{
return '1';
}
}catch(e){}
}
}else if( u.indexOf('iPad') gt; -1){
return '0';
}else{
return '1';
}
}
二、js调用app端函数,下面是js代码
if(ismobile(1)==1){
Android.setTypeActivity(id,type,href);
}else{
jsToios(id,type,href);
}
setTypeActivity是Android端定义的函数,jsToios是ios端定义的函数,括号里是js端传递的参数。
三、至于js端怎样获取app端的数据,只需在js端提供给app端函数名字,在通知app端调用即可
四、还有一种方法可以不通过app的方法将数据传递给另一个页面,那就是通过URL的方式
在本页面将数据拼接在ip后面
在另外一个页面通过下面方法获取URL后的参数
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("");
for(var i = 0; i strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1]);
}
}
return theRequest;
}
// 获取URL参数
var Request = new Object();
Request = GetRequest();
var name;
name = Request['name'];
移动开发中,我们经常会遇到混合开发模式,经常是在移动客户端中增加网页,来减少客户端的压力,同时也让软件更加灵活。废话少说,下面直接进入主题。
webView.getSettings().setAppCachePath(getCacheDir().getAbsolutePath());
webView.getSettings().setAppCacheEnabled(true);
if (Constant.DEBUG) {
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
}
if (Build.VERSION.SDK_INT = Build.VERSION_CODES.LOLLIPOP) {
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
//参数1 定义Android 与js交互的接口, 参数2 与js交互的一个常量,可以是任意一个常量字符串,
但是h5网页调用的时候需要增加这个参数二:handler
public class JSInterface{
@JavascriptInterface//这个标注必须加上 表示js要调用的方法,可以自动识别
public void getShareInfo(String strings) {
//todo android dosomething
}
}
那么 js端该如何调用这个方法呢\
android 和ios的调用方法不一样 因此 h5里面需要区别andorid和ios机型来分别调用移动端方法
如android:
//handler 是与android 约定的常量(最好做成全局通用的常量)
//getShareInfo 是与android 定义的调用方法
以上常量、方法、参数类型 必须一致才能成功调用
WebView提供两个事件回调类给应用层,分别为WebViewClient,WebChromeClient开发者可以继承
这两个类,接手相应事件处理。WebViewClient 主要提供网页加载各个阶段的通知,比如网页开始
加载onPageStarted,网页结束加载onPageFinished等;WebChromeClient主要提供网页加载过程
中提供的数据内容,比如返回网页的title,favicon等。
有需要监听加载网页进度
//需要webBar的可以自定义增加一个webBar
最后,就是大家都知道的webView.loadUrl(url);//url需要加载的网页
那么,如何在android调用js的方法呢
//getMsg() 为js里面暴露的方法
在销毁的时候:
protected void onDestroy() {\
super.onDestroy();\
if (webView != null) {\
webView.loadUrl("about:blank");\
webView.destory();\
}\
}
Android的webview是基于webkit内核的,webview中集成了js与java互调的接口函数,通过addJavas criptInterface方法,可以将Java的类注册进webkit,给网页上的js进行调用,而且还可以通过loadUrl方法是给webkit传递一个URL,供浏览器来进行解析,实现Java和js交互。要想运行网页上的js脚本,webview必须设置支持Javas cript。Java代码1mWebview.getSettings().setJavas criptEnabled(true);然后是设置webview要加载的网页:web的网页:webView.loadUrl("");本地的网页:webView.loadUrl(""); //本地的存放在:assets文件夹中webview做完基本的初始化后我们还要要给它,加进一个回调的代理类Javas criptInterface,并给它一个调用的名称:ncpJava代码1mWebView.addJavas criptInterface(new Javas criptInterface(),"ncp");Javas criptInterface可以是一个普通的Java类,类实现的方法,均可被js回调:Java代码final class Javas criptInterface {public int callOnJs() {return 1000;}public void callOnJs2(String mode) {//TODO}}Java要调用js的方法,只需知道js的方法名称即可:Java代码1mWebView.loadUrl("javas cript:onSaveCallback()");js 这边就更简单:Js代码window.onload = function(){document.getElementById('btn_1').addEventListener('click', onBtnClick, false);var _int_value = window.ncp.callOnJs();alert("get int from java:" + _int_value );}function onBtnClick() {window.ncp.callOnJs2("click");}
Android和ios都是用navtive语言编写的app,那么调用js的方法如下:
Native 调用 JS:
本质就一个方法,通过 stringByEvaluatingJavaScriptFromString,都是同步。
1.通常方法:js修通过改doucument的loaction或者新建一个看不见的iFrame,修改它的 src,就会触发回调 webView 的 shouldStartLoadWithRequest,参数 request 的 url 就是新赋值的 location 或者 url,上层截获这个 url 的参数,对此分发即可。 这个都是异步调用的。
如 JS function:
var messagingIframe;
messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
document.documentElement.appendChild(messagingIframe);
function TestIOSJS(){
messagingIframe.src = "ios/test/click";
};
当触发上面的JS时,webview会收到下面的回调:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *url = request.URL.absoluteString;
if([url hasSuffix:@"ios/test/click"]){
//do something you want
return NO;
}
return YES;
}
通过截获这个request的参数就可以做native需要做的事情。