android与js的交互
android与js的交互
android与js的交互在android开发中是很常见,一般是利用webView当作桥梁,进而实现android调用js,js调用android代码。下面就这两种待用具体记录一下。
android调用js代码
方式1,利用loadUrl
众所周知,webview
加载网页时,使用是loadUrl()
方法,例如我们加载本地的网页代码可以实现如下:
mWebView = findViewById(R.id.webview);mWebView.loadUrl("file:///android_asset/html/Share.html");
当然,也可以用loadUrl
加载非本地的网页,我们甚至还可以用loadUrl
来运行js
代码。
例如Share.html
中的js代码如下:
function test() { console.log("[share_debug] test"); }
那么,我们在加载完Share.html
之后,我们就可以利用loadUrl
来执行test
方法了。代码如下:
mWebView.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView webView, String s) { super.onPageFinished(webView, s); mWebView.loadUrl("javascript:test()"); } });
这一段核心就只有一句loadUrl
,调用他之后就会直接调用android代码。值得注意的时,用loadUrl
只有在页面加载完了之后才能运行js代码,也就时在onPageFinished
回调之后,否则不会调用到js代码,并且调用loadUrl
会使得页面刷新。
方式2,利用evaluateJavascript
在android4.4之后,我们就可以通过evaluateJavascript
来执行js
代码了。还是以方式1中js中的test方法为例,androi端的调用就可以这么实现:
mWebView.evaluateJavascript("javascript:test()", new ValueCallback() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 } });}
evaluateJavascript()
方法执行之后,并不会使得页面刷新,所以他的执行效率比loadUrl
要高,并且我们可以很方便的得到js执行的返回值,但是注意要兼容4.4以下的版本。
总结
使用建议:在能使用evaluateJavascript
尽量使用evaluateJavascript
,并使用loadUrl
保证兼容性.
if(Build.VERSION.SDK_INT < 18) { mWebView.loadUrl("javascript:test()"); } else { mWebView.evaluateJavascript("javascript:test()", null); }
js调用android代码
js调用android代码方法大致有三种,下面分别进行介绍。
使用addJavascriptInterface注释
这种方式就相当于将android方法映射给js,使得js可以直接调用android代码
示例代码如下:
在Android中需要给方法添加addJavascriptInterface
注释来进行映射。
参考代码如下:
mWebView = findViewById(R.id.webView); WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); // 设置允许js交互 mWebView.addJavascriptInterface(new IJavaScriptInterface(), "api"); // 将对象映射到js方法中去 mWebView.loadUrl("file:///android_asset/test.html");private class IJavaScriptInterface { // 注意这个注释 @JavascriptInterface public void testCalledByJs(String msg) { Log.d(TAG, "testCalledByJs: "+msg); }}
对应的js调用就比较简单了,就是映射过来的对象
+.
+ 映射的方法
。上栗中我们的对象是api
,方法是testCalledByJs
,所有调用就应该是api.testCalledByJs("test1");
参考如下:
function testCallAndroid1(){ console.log("test1"); api.testCalledByJs("test1");}
注意,这种方法在4.2版本以下时有严重的漏洞,在4.2以下的版本不应该使用这种方式。
URL拦截
这种方式就是通过在android端拦截js的url跳转,如果判断时指定的url就执行对应的android代码指令。
在androi端,通过WebViewClient
的shouldOverrideUrlLoading
获取到js的跳转指令,通过解析url,判断是我们需要解析的指令,就指定对应的方法,并返回true。
例如我们在android端可以这么写:
mWebView = findViewById(R.id.webView); WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); // 设置允许js交互 mWebView.loadUrl("file:///android_asset/test.html"); mWebView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView webView, String s) { if(s.equals("control:cancel")) { onCancel();// 对应的android方法。这里就不进行实现了 return true; } return super.shouldOverrideUrlLoading(webView, s); } });
在js里面的调用也特别简单,代码如下:
function testCancel() { document.location = "control:cancel"; }
当然,我们完全可以在url里传一些指定的参数,来进行参数传递,我们只需要在shouldOverrideUrlLoading
中解析中来即可。
方法拦截
与URL方法来接类似,我们可以通过拦截js中的一些方法来实现js调用android的方法。
我们常用的拦截js的方法主要包括: alert()
(弹出警告框,没有返回值),confirm()
(弹出确认框,有两个返回值),prompt()
(弹出输入框,任意设置返回值)。我们在android端通过实现WebChromeClient
中的onJsAlert()
、onJsConfirm()
、onJsPrompt()
来拦截上述的三个方法。
常见的拦截都是拦截prompt
方法,因为只有prompt
可以返回任意类型的数据,操作更加全面、也更加灵活。
下面就以拦截js的prompt
方法为例,实现js调用android端的方法。
在android端实现如下:
我们把拦截的方法单独成类,譬如我们可以这么写:
class hijackWebChromeClient extends WebChromeClient { String TAG = "tag"; @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { // 根据协议的参数,判断是否是所需要的url(原理同方式2) // 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数) //假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的) Uri uri = Uri.parse(message); // 如果url的协议 = 预先约定的 js 协议 // 就解析往下解析参数 if (uri.getScheme().equals("js")) { // 如果 authority = 预先约定协议里的 webview,即代表都符合约定的协议 // 所以拦截url,下面JS开始调用Android需要的方法 if (uri.getAuthority().equals("demo")) { // 执行JS所需要调用的逻辑 Log.d(TAG,"js调用了Android的方法"); // 可以在协议上带有参数并传递到Android上 HashMap params = new HashMap<>(); Set collection = uri.getQueryParameterNames(); //参数result:代表消息框的返回值(输入值) result.confirm("js调用了Android的方法成功啦"); } return true; } return super.onJsPrompt(view, url, message, defaultValue, result); } // 拦截JS的警告框 @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, result); } // 拦截JS的确认框 @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { return super.onJsConfirm(view, url, message, result); }}
在拦截js的方法的实现类中,我们仅实现了一个onJsPrompt
,用于实现拦截js的prompt
方法,其他的可以自行实现。实现了对方法的拦截,我们将其设置给目标webView即可。
WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); // 设置允许js交互 settings.setJavaScriptCanOpenWindowsAutomatically(true); //允许js弹窗 mWebView.loadUrl("file:///android_asset/test.html"); mWebView.setWebChromeClient(new hijackWebChromeClient());
在js中的调用相对来说就简单了,参考下面的调用就好了。
function testCallAndroid3(){ console.log("test3"); // 调用prompt() var result = prompt("js://demo?arg1=111&arg2=222"); console.log("get data " + result); }
总结
js调用android方法一共有三种,第一种是直接映射给js进行调用,使用简单,但是在4.2以下的版本中存在重大安全漏洞,第二中是通过android端拦截js的URL来进行实现,但是如果js不好获取其返回值,第三种是通过android端拦截js的方法来进行实现,这种方法比较灵活,基本能满足开发需求,但是需要相关协议进行约束,否者不好管理。
参考链接
- https://75team.com/post/android-webview-and-js.html
- https://blog.csdn.net/carson_ho/article/details/64904691
更多相关文章
- 丢失Android系统库或者Conversion to Dalvik format failed with
- Android编程简单设置ListView分割线的方法
- android通过代码来开启和关闭移动网络
- [android][利用JNI技术在Android中调用、调试C++代码]
- 【Android 开发】: Android 消息处理机制之三: Handler 中 sendM