webview实现js与android交互
1.加载静态webview页面:
这种情况一般项目中用的少,但是也不排除会用到,代码我就不上了,这个静态基本上都是几行死代码.
2.android调用js中的函数:
我们知道webview作为android与js交互的桥梁,那么我们在android中调用js应该怎么去调用呐?
1.获取到html文本,这个可以放到本地资源文件,也可以在网页上加载。根据项目需求决定
2.设置webview相关api
3.调用js函数
WebSettings webSettings = mWebView.getSettings();
//支持javascript
webSettings.setJavaScriptEnabled(true);
//允许弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//加载本地html文件
mWebView.loadUrl("file:///android_asset/JsTest.html");
//android中调用js中函数xxx()
mWebView.evaluateJavascript("javascript:xxx()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
//s调用js函数xxx返回的结果
} }
);
// 由于设置了弹窗检验调用结果,所以需要支持js对话框
// webview只是载体,内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
mWebView.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.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
}
3.js中调用android中的方法:
在Android平台调用JS的实现比较简单,那很多时候需要从JS端调用Android平台的交互,一共有3种实现方式:
通过WebView的addJavascriptInterface()进行对象映射
通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息
建议弃用第一种(后面贴出原因),这里我选择第二种讲解下:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 步骤2:根据协议的参数,判断是否是所需要的url
// 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)
//假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)
Uri uri = Uri.parse(url);
// 如果url的协议 = 预先约定的 js 协议
// 就解析往下解析参数
if ( uri.getScheme().equals("js")) {
// 如果 authority = 预先约定协议里的 webview,即代表都符合约定的协议
// 所以拦截url,下面JS开始调用Android需要的方法
if (uri.getAuthority().equals("webview")) {
// 步骤3:
// 执行JS所需要调用的逻辑(这里就是js调用android方法的地方)
System.out.println("js调用了Android的方法");
// 可以在协议上带有参数并传递到Android上
HashMap<String, String> params = new HashMap<>();
Set<String> collection = uri.getQueryParameterNames();
}
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
);
}
}