1,html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div id="message"></div>
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()"></button>
</body>
<script src="js/jquery.min.js"></script>
<script >
function sendMsg(content) {
<!--$("#message").append(content+ "<br/>");-->
$("#message").load(content);
}
function callAndroid(){
// 由于对象映射,所以调用test对象等于调用Android映射的对象
test.showtw("js调用了android中的hello方法");
}
</script>
</html>
2,Android 端Activity类
定义WebView
//定义WebView
@BindView(R.id.webview)
WebView mWebView;
ButterKnife.bind(this);
init();
private void init() {
WebSettings webSettings = mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//启动XMLHttpRequest, Ajax
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
webSettings.setAllowFileAccessFromFileURLs(true);
}
// 通过addJavascriptInterface()将Java对象映射到JS对象
//参数1:Javascript对象名
//参数2:Java对象名
mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象
// 先载入JS代码
// 格式规定为:file:///android_asset/文件名.html
mWebView.loadUrl("file:///android_asset/story.html");
}
3,Android 调用js 方法 ---方法名要一致
mWebView.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
mWebView.loadUrl("javascript:sendMsg('"+FilePath+"')");
}
});
function sendMsg(content) {
<!--$("#message").append(content+ "<br/>");-->
//load("aa.txt") ; 导入文件
$("#message").load(content);
}
4,Js 调用Android 方法
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()"></button>
function callAndroid(){
// 由于对象映射,所以调用test对象等于调用Android映射的对象,方法名要一致
test.showtw("js调用了android中的方法");
}
class AndroidtoJs extends Object {
// 定义JS需要调用的方法
// 被JS调用的方法必须加入@JavascriptInterface注解
@JavascriptInterface
public void showtw(String msg) {
tw.setText(msg);
}
}