WebView的使用小结----与JS的交互
2017-03-08 23:04
351 查看
WebView不但可以运行一段HTML代码，还有一个重要特点，就是WebView可以同JavaScript互相调用。
通过addJavascriptInterface(Object obj,String interfaceName)方法将一个Java对象绑定到一个Javascript对象中，Javascript对象名就是interfaceName，作用域是Global，这样便可以扩展Javascript的API，获取Android的数据。
JS交互主要分为两类
android中利用webview调用网页上的js代码。
网页上调用android中java代码的方法
1.android中利用webview调用网页上的js代码。
示例：
如果要调用js中的function test(str)方法
2.网页上调用android中java代码的方法
最近在公司就这样的需求，需要我这里返回数据那边的H5进行处理，就是靠这个。
这里我就给大家一个简单的例子吧
首先html文件写个简单的
l.html
对了在着重介绍下这个方法
从上面的html文件和代码可以看出来
control.showToast(toast);的control对应 webView.addJavascriptInterface(new JsInterface(), “control”);的第二个参数，而showToast则对应方法名。
这里再次提醒 webSettings.setJavaScriptEnabled(true);一定要设置不然都是白做
还有console.log(msg);这个是只在控制台显示 你们试下就知道了
再给大家说了算是：
WebView.loadUrl(“javascript:方法名()”);的使用例子。
就是点击html的任何图像都会有反应 这里默认为跳转吧
话不多说 直接上例子有 上面的过度想必看起来就会非常轻松
这里要注意点是 public void openImage(String img) 这个方法前面要加注解 @android.webkit.JavascriptInterface
这里再说下 webView.loadUrl来直接调用js方法 其实也可以自己写个方法来执行
比如
通过addJavascriptInterface(Object obj,String interfaceName)方法将一个Java对象绑定到一个Javascript对象中，Javascript对象名就是interfaceName，作用域是Global，这样便可以扩展Javascript的API，获取Android的数据。
JS交互主要分为两类
android中利用webview调用网页上的js代码。
网页上调用android中java代码的方法
1.android中利用webview调用网页上的js代码。
WebView.loadUrl("javascript:方法名()");示例：
如果要调用js中的function test(str)方法
mWebView.loadUrl("javascript:test('ls')");2.网页上调用android中java代码的方法
最近在公司就这样的需求，需要我这里返回数据那边的H5进行处理，就是靠这个。
这里我就给大家一个简单的例子吧
首先html文件写个简单的
l.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function showToast(toast) {
control.showToast(toast);
}
function log(msg) {
console.log(msg);
}
</script>
<style type="text/css">
input{
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<input type="button" value="toast" onclick="showToast('hello world!这是我的显示')" >
<input type="button" value="msg1" onclick="log('hello world!')" >
<input type="text" value="2123131" >
</body>
</html>对了在着重介绍下这个方法
// 给webview添加JavaScript接口
webView.addJavascriptInterface(new JsInterface(), "control");
public class JsInterface {
@JavascriptInterface
public String showToast(String toast) {
Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
return "success";
}
}从上面的html文件和代码可以看出来
control.showToast(toast);的control对应 webView.addJavascriptInterface(new JsInterface(), “control”);的第二个参数，而showToast则对应方法名。
package com.example.admin.webview;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;
public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
// TODO Auto-generated method stub
// 获取webview控件
webView = (WebView) findViewById(R.id.webview);
// 获取WebView的设置
WebSettings webSettings = webView.getSettings();
// 将JavaScript设置为可用，这一句话是必须的，不然所做一切都是徒劳的
webSettings.setJavaScriptEnabled(true);
// 给webview添加JavaScript接口
webView.addJavascriptInterface(new JsInterface(), "control");
// 通过webview加载html页面
webView.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
webView.loadUrl("file:///android_asset/l.html");
}
public class JsInterface {
@JavascriptInterface
public String showToast(String toast) {
Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
return "success";
}
}
}这里再次提醒 webSettings.setJavaScriptEnabled(true);一定要设置不然都是白做
还有console.log(msg);这个是只在控制台显示 你们试下就知道了
再给大家说了算是：
WebView.loadUrl(“javascript:方法名()”);的使用例子。
就是点击html的任何图像都会有反应 这里默认为跳转吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片</title>
</head>
<style type="text/css">
.box{
width:190px;
height:290px;
margin:0 auto;
}
</style>
<body>
<div class="box">
<img src="https://img.alicdn.com/tps/TB11tvkPFXXXXcIaXXXXXXXXXXX-190-290.jpg_290x290Q75s0.jpg">
</div>
</body>
</html>话不多说 直接上例子有 上面的过度想必看起来就会非常轻松
@SuppressLint("SetJavaScriptEnabled")
public class Main2Activity extends Activity {
private WebView contentWebView = null;
@SuppressLint("SetJavaScriptEnabled")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
contentWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 随便找了个带图片的网站
// contentWebView.loadUrl("file:///android_asset/img.html");
contentWebView.loadUrl("http://139.196.208.240:801/wap/edu/news.aspx");
// 添加js交互接口类，并起别名 imagelistner
contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
contentWebView.setWebViewClient(new MyWebViewClient());
}
// 注入js函数监听
private void addImageClickListner() {
Log.e("执行了么","执行");
// 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去
contentWebView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ " objs[i].onclick=function() " +
" { "
+ " window.imagelistner.openImage(this.src); " +
" } " +
"}" +
"})()");
}
// js通信接口
public class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img) {
Log.e("喔喔","wewf");
System.out.println(img);
//
Intent intent = new Intent();
intent.putExtra("image", img);
intent.setClass(context, ShowWebImageActivity.class);
context.startActivity(intent);
System.out.println(img);
}
}
// 监听
private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onPageFinished(WebView view, String url) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageFinished(view, url);
// html加载完成之后，添加监听图片的点击js函数
addImageClickListner();
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageStarted(view, url, favicon);
}
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
}
}
}这里要注意点是 public void openImage(String img) 这个方法前面要加注解 @android.webkit.JavascriptInterface
这里再说下 webView.loadUrl来直接调用js方法 其实也可以自己写个方法来执行
比如
webView.loadUrl("javascript:(function (){"
+"window.network.isPlay();"
+"})()"
);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用WebViewJavascriptBridge实现OC与JS交互
- web与js交互（WebViewJavascriptBridge使用）
- 项目中关于oc与JS的交互，wkwebview的使用
- Android WebView使用方法详解 附js交互调用方法
- WebView的使用以及Android与Js的交互
- UIWebView和WKWebView的使用及js交互
- WKWebView的使用与JS交互详细解读
- [iOS] 使用WebViewJavascriptBridge实现OC与JS交互
- Android-使用JsBridge来优化js与本地webview的交互
- HTML---android webview组件如何使用 Webview与js交互
- Adnroid WebView使用,js交互与弹窗设置
- 安卓webview的详细使用详情，webview和js交互
- Android WebView使用全面解析（加载网络资源、本地HTML，JS交互）
- 安卓使用WebView与js进行交互
- Android基础——WebView使用（二）Java与JS交互
- 安卓webview的详细使用详情，webview和js交互
- UIWebView和WKWebView的使用及js交互
- WKWebView的使用及js交互Demo
- UIWebView和WKWebView的使用及js交互
- Android WebView的使用并与JS交互