Android中很多直接显示网页的需求,但是很错不单单只是显示网页就可以了,还需要与网页进行交互,就是所谓的Java与javascript交互。
如何实现:
实现Java和js交互十分便捷。通常只需要以下几步。
WebView开启JavaScript脚本执行
WebView设置供JavaScript调用的交互接口。
客户端和网页端编写调用对方的代码。
先贴出代码:
public class MainActivity extends Activity {
private WebView webView;
private String url_path = "http://m.dapu.com/mgallery-promotion-298.html";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
// 覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
webView.setWebViewClient(new WebViewClient() {
@Override
// 在点击请求的是链接是才会调用,重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边。这个函数我们可以做很多操作,比如我们读取到某些特殊的URL,于是就可以不打开地址,取消这个操作,进行预先定义的其他操作,这对一个程序是非常必要的。
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 判断url链接中是否含有某个字段,如果有就执行指定的跳转(不执行跳转url链接),如果没有就加载url链接
if (url.contains("/mproduct-")) {
Intent i = new Intent(MainActivity.this, MainActivity.class);
startActivity(i);
return true;
} else {
return false;
}
}
public void onReceivedSslError(WebView view,
SslErrorHandler handler, SslError error) {
// handler.cancel(); 默认的处理方式,WebView变成空白页
// //接受证书
handler.proceed();
// handleMessage(Message msg); 其他处理
}
@Override
// 此回调是拦截点击要跳转的url链接,并对请求的url链接做修改(添加删除字段)
public WebResourceResponse shouldInterceptRequest(WebView view,
String url) {
return null;
}
@Override
//加载完页面之后的处理
public void onPageFinished(WebView view, String url) {
//网页加载完之后,java调用js方法
webView.loadUrl("javascript:shareToFriends()");
super.onPageFinished(view, url);
}
});
webView.addJavascriptInterface(new JsToJava(), "androidShare");
webView.setWebChromeClient(new WebChromeClient(){
//处理javaScrip的Alter事件,这里也可以用android组件替换
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
return super.onJsAlert(view, url, message, result);
}
//加载进度条
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
}
});
// WebView加载web资源
webView.loadUrl(url_path);
}
private class JsToJava{
//这里需要加@JavascriptInterface,4.2之后提供给javascript调用的函数必须带有@JavascriptInterface
@JavascriptInterface
public void jsMethod(String paramFromJS){
System.out.println("js返回结果:" + paramFromJS);//处理返回的结果
}
}
@SuppressLint("SetJavaScriptEnabled")
private void initView() {
webView = (WebView) findViewById(R.id.webView);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setBuiltInZoomControls(true);// 设置支持缩放
settings.setSupportZoom(false);// 不支持缩放
settings.setUseWideViewPort(false);// 将图片调整到适合webview大小
settings.setLoadWithOverviewMode(true);// 缩放至屏幕的大小
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//支持缓存
}
// 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
webView.goBack();// 返回前一个页面
// finish();
return true;
}
return super.onKeyDown(keyCode, event);
}
}
网页代码:
<script type="text/javascript">
function shareToFriends(){
var result = "title:'大朴优选:发现光芒之物',desc:'大朴优选:发现光芒之物',link:'http://m.dapu.com/mgallery-promotion- 298.html',imgUrl:'http://activity.dapuimg.com/dapu_20160825000_r1_c1.jpg'";
window.androidShare.jsMethod(result);
}
script>
Java调用JS,获取不到返回值
webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)
获取javascript返回值,首先要对webview绑定javascriptInterface,js脚本通过这个接口来调用java代码。
webView.addJavascriptInterface(new JsToJava(), "androidShare");
JsToJava实际就是一个普通的java类,里面是我们本地实现的java代码, 将object 传递给webview,并指定别名,这样js脚本就可以通过我们给的这个别名来调用我们的方法,在上面的代码中,androidShare是这个对象在js中的别名
private class JsToJava{
//这里需要加@JavascriptInterface,4.2之后提供给javascript调用的函数必须带有@JavascriptInterface
@JavascriptInterface
public void jsMethod(String paramFromJS){
System.out.println("js返回结果:" + paramFromJS);//处理返回的结果
}
}
当网页加载完之后,在加载完回调方法中调用js方法
@Override
//加载完页面之后的处理
public void onPageFinished(WebView view, String url) {
//网页加载完之后,java调用js方法
webView.loadUrl("javascript:shareToFriends()");
super.onPageFinished(view, url);
}
然后执行js方法,js方法中在调用java注册的方法来回来数据给java
function shareToFriends(){
var result = "title:'大朴优选:发现光芒之物',desc:'大朴优选:发现光芒之物',link:'http://m.dapu.com/mgallery-promotion- 298.html',imgUrl:'http://activity.dapuimg.com/dapu_20160825000_r1_c1.jpg'";
window.androidShare.jsMethod(result);
}
window.androidShare.jsMethod(result);这行代码就是javascript调用java代码返回数据给java
补充:
对于Android调用JS代码的方法有2种:
Android 4.4以下使用方法1,Android 4.4以上方法2
1. 通过WebView的loadUrl()
2. 通过WebView的evaluateJavascript()
通过WebView的loadUrl()
// 调用javascript的callJS()方法
mWebView.loadUrl("javascript:callJS()");
关于调用js方法传值的参数写法
webView.loadUrl("javascript:callJS('" + name + "','" + password + "')");
通过WebView的evaluateJavascript()
// 只需要将第一种方法的loadUrl()换成下面该方法即可
mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
源码下载