本文主要是介绍Android 跟H5(js)交互（Android 调用H5(js)有参方法和无惨方法，H5调用Android 有参、多参、无惨方法），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
实例化组件
@BindView(R.id. btn1 )
Button mBtn1;
@BindView(R.id. btn2 )
Button mBtn2;
@BindView(R.id. wv_java_call_js )
WebView mWvJavaCallJs;
//设置WebView支持JS
mWvJavaCallJs.getSettings().setJavaScriptEnabled(true);
//从assets目录下加载html
mWvJavaCallJs.loadUrl("file:///android_asset/webs.html");
//自定义WebView的背景颜色,设置为透明色
mWvJavaCallJs.setBackgroundColor(Color.TRANSPARENT);
//设置背景图片
MWebViewClient mWebViewClient = new MWebViewClient(mWvJavaCallJs,this);
mWvJavaCallJs.setWebViewClient(mWebViewClient);
MWebChromeClient mWebChromeClient = new MWebChromeClient(this);
mWvJavaCallJs.setWebChromeClient(mWebChromeClient);
//添加js调用android(java)的方法接口
MJavascriptInterface mJavascriptInterface = new MJavascriptInterface(this);
//给webview加载js代码，第一参数创建接口类的对象MJavascriptInterface，第二个参数，js里的对象(协定规范)比如qsjia
mWvJavaCallJs.addJavascriptInterface(mJavascriptInterface,"uoozi");
@OnClick({R.id. btn1 , R.id. btn2 })
public void onClick(View view) {
switch (view.getId()) {
case R.id. btn1 :
mWvJavaCallJs.loadUrl("javascript:javacalljs()"); // Android调用h5无参数
break;
case R.id. btn2 :
mWvJavaCallJs.loadUrl("javascript:javacalljsparam(" + "'啧啧啧'" + ")"); // Android调用h5有参数
break;
}
}
js调用android(java)的方法接口
public class MJavascriptInterface {
private Context mContext;
public MJavascriptInterface(Context context) {
mContext = context;
}
/**
* JS调用Android(Java)无参数的方法
*/
@JavascriptInterface
public void jsCallWebView() {
Toast. makeText (mContext, "JS Call Java!",
Toast. LENGTH_LONG ).show();
}
/**
* JS调用Android(Java)含参数的方法
* @param param
*/
@JavascriptInterface
public void jsCallWebView(String param,String arg ) {
Toast. makeText (mContext, "JS Call Java!" + param+"arg="+arg,
Toast. LENGTH_LONG ).show();
}
}
webs.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>测试页面</title>
</head>
<body>
<div onClick="window.uoozi.jsCallWebView()">无参数JS调用java代码</div>
<br/>
<div onClick="alert(1111)"><u>内部弹框</u></div>
<div onClick="testFunc()"><u>方法调用</u></div>
<br/>
<div onClick="window.uoozi.jsCallWebView('第一个参数','第二个参数')">android含参数调用java代码</div>
<div onClick="window.webkit.messageHandlers.jsCallWebView.postMessage('我是ios参数')">ios含参数调用java代码</div>
<br/>
<br/>
<div id="content">内容显示 <a href="jump.html" target="_self">跳转新页面jump.html</a></div>
</body>
<script type="text/javascript">
var isAndroid;//是否是android设备
window.onload = function(){
if (/android/i.test(navigator.userAgent)){
//判断为android
isAndroid=true;
}else if(/ipad|iphone/i.test(navigator.userAgent)){
isAndroid=false;
}else{
isAndroid=false;
}
}
//Java调用JS代码无参数
function javacalljs(){
document.getElementById("content").innerHTML +=
"<br\>java调用了js函数";
}
//Java调用JS代码有参数
function javacalljsparam(param){
document.getElementById("content").innerHTML +=
"<br\>java调用了js函数含参数param"+param;
}
function testFunc(){
if(isAndroid){
<!--window.协定规范.方法名('第一个参数','第二个参数');-->
window.uoozi.jsCallWebView('方法第一个参数','方法第二个参数');
}else{
<!--window.webkit.messageHandlers.方法名.postMessage('参数')-->
window.webkit.messageHandlers.jsCallWebView.postMessage('我是参数ios');
}
<!--window.WebViewFunc.jsCallWebView();-->
}
</script>
</html>
MWebChromeClient
public class MWebChromeClient extends WebChromeClient {
private Context mContext;
public MWebChromeClient(Context context) {
mContext = context;
}
/**
* JS调用Android(Java)无参数的方法
*/
@JavascriptInterface
public void jsCallWebView() {
Toast. makeText (mContext, "JS Call Java!",
Toast. LENGTH_SHORT ).show();
}
/**
* JS调用Android(Java)含参数的方法
* @param param
*/
@JavascriptInterface
public void jsCallWebView(String param) {
Toast. makeText (mContext, "JS Call Java!" + param,
Toast. LENGTH_SHORT ).show();
}
}
MWebViewClient
public class MWebViewClient extends WebViewClient {
private static final String TAG = "MWebViewClient";
private WebView mWebView;
private Context mContext;
public MWebViewClient(WebView webView, Context context) {
mWebView = webView;
mContext = context;
}
/**
* 在点击请求的是链接是才会调用，
* 重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 使用自己的WebView组件来响应Url加载事件，而不是使用默认浏览器器加载页面
mWebView.loadUrl(url);
// 记得消耗掉这个事件。给不知道的朋友再解释一下，Android中返回True的意思就是到此为止,
// 事件就会不会冒泡传递了，我们称之为消耗掉
return true;
}
/**
* 页面开始加载时调用的方法
* @param view
* @param url
* @param favicon
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
Log. e ( TAG , "onPageStarted: " );
super.onPageStarted(view, url, favicon);
}
/**
* 页面加载完成调用的方法
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
Log. e ( TAG , "onPageFinished: " );
super.onPageFinished(view, url);
}
/**
* 在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
*/
@Override
public void onLoadResource(WebView view, String url) {
// Toast.makeText(context, "WebViewClient.onLoadResource", Toast.LENGTH_SHORT).show();
Log. e ("WebActivity", "onLoadResource");
super.onLoadResource(view, url);
}
/**
* 重写此方法可以让WebView支持https请求
* @param view
* @param handler
* @param error
*/
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
super.onReceivedSslError(view, handler, error);
}
}
这篇关于Android 跟H5(js)交互（Android 调用H5(js)有参方法和无惨方法，H5调用Android 有参、多参、无惨方法）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
