Android调用js的坑
2017-03-07 本文已影响560人
唠嗑008
Android中可以使用WebView加载网页，同时Android端的java代码可以与网页上的javascript代码之间相互调用。
一般情况下，我们的代码是这样的
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
webView.setVerticalScrollbarOverlay(true);
//设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/webview.html");
//在js中调用本地java方法
webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
// //添加客户端支持
webView.setWebChromeClient(new WebChromeClient());
}
private class JsInterface {
private Context mContext;
public JsInterface(Context context) {
this.mContext = context;
}
//在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
@JavascriptInterface
public void showInfoFromJs(String name) {
Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
}
}
//在java中调用js代码
public void sendInfoToJs(View view) {
String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
//调用js中的函数：showInfoFromJava(msg)
webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
// webView.loadUrl("javascript:showInfoFromJava()");
}
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Android WebView 与 Javascript 交互</title>
</head>
<body>
<input type="button" value="分享" onclick="f1()">
<input type="text" id="show"/>
</body>
<script>
function f1(){
AndroidWebView.showInfoFromJs("hello");
}
function showInfoFromJava
坑来了，不知道大家有没有遇到过，反正在我的项目中是遇到了，我花了差不多2天时间才找到原因，情况是这样的：我在与h5做交互的时候，会让h5调用我Android的方法，也就是JsInterface 这个类中的方法，而且我需要在这个方法中再去调用h5的js的方法，于是就出现怎么也调用不了js的方法。而且在外部的其他方法中都能正常调用js的方法，唯独在这个供js调用的这个方法中不能去调用js，我怎么也想不到解决办法，最后查阅资料，终于找到原因：
注意: android 调用js代码可能会报错：W/WebView(2088): java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread.
解决办法：
private class JsInterface {
//在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
@JavascriptInterface
public void showInfoFromJs(String name) {
Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
}
webView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
}
});
}
具体原因是这样的：
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写业务脚本、以提升加载速度、改善用户体验
