WebView JS与app本地方法互相调用
【摘要】 Android调用JS方法有2种
通过webView的loadUrl()方法通过webView的evaluateJavascript()方法
JS调用Android的方法有3种
通过WebView的addJavascriptInterface()方法进行对象映射通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url通...
Android调用JS方法有2种
- 通过webView的loadUrl()方法
- 通过webView的evaluateJavascript()方法
JS调用Android的方法有3种
- 通过WebView的addJavascriptInterface()方法进行对象映射
- 通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url
- 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息
Android调用JS
首先要打开交互权限
//允许使用javascript
webSettings.setJavaScriptEnabled(true);
- 1
- 2
html页面
<!DOCTYPE html>
<html>
<head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title> java调用js </title>
</head>
<body>
<p id="content"></p>
<h1>Hello World!这是java调用JS</h1>
</body>
<script> // Android需要调用的方法 function javaCallJs(){ alert("Android调用了JS的无参方法"); } // Android需要调用的方法 function callJsWithParams(data){ alert(data); } function callJs(){ return "Hello，I am your boss"; } function callJsWithParams(data){ return data+",my dear friend"; }
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
1.通过webView的loadUrl()方法
//无参
mWebview.loadUrl("javascript:javaCallJs()");
//带参
mWebview.loadUrl("javascript:callJsWithParams(" + "'android正在调用带参的JS方法'" + ")");
- 1
- 2
- 3
- 4
- 5
2.使用webview.evaluateJavascript()方法,注意这个方法是4.4以上才支持，这种方式特别适合需要js方法返回值给app的情况
mWebview.evaluateJavascript("javascript:callJs()", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show(); } }); mWebview.evaluateJavascript("javascript:callJsWithParams('Bye Bye')", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show(); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
JS调用Android
首先在android打开交互权限：
//打开交互权限
webSettings.setJavaScriptEnabled(true);
- 1
- 2
html页面
<!DOCTYPE html>
<html>
<head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title> java调用js </title>
</head>
<body>
<p id="content"></p>
<h1>Hello World!这是js调用android</h1>
<button onclick="jsCallAndroid()">Js调用Android</button>
</body>
<script> function jsCallAndroid(){ //Js调用Android的方法 AndroidNativeMethod.sendDataToAndroid("I am from js"); }
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
1. 通过WebView的addJavascriptInterface()方法进行对象映射
(1)首先进行对象的映射，如JSInterface对象映射到AndroidNativeMethod：
// 在webView中添加如下代码,AndroidNativeMeth将会在js中被用来调用app的方法
mWebview.addJavascriptInterface(new JSInterface(),"AndroidNativeMethod");
- 1
- 2
（2）在webView中创建这个JSInterface类,并在方法上使用@JavascriptInterface注解,注意这个回调需要在子线程：
public class JSInterface{ @JavascriptInterface public void sendDataToAndroid(String data){ Toast.makeText(MainActivity.this,data,Toast.LENGTH_SHORT).show(); } }
- 1
- 2
- 3
- 4
- 5
- 6
（3）js调用android的方法，注意AndroidNativeMethod就是约定好的映射对象名称：
function jsCallAndroid(){ //Js调用Android的方法 AndroidNativeMethod.sendDataToAndroid("I am from js"); }
- 1
- 2
- 3
- 4
2. 通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url
//加上下面这段代码可以使网页中的链接不以浏览器的方式打开
mWebview.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { return super.shouldOverrideUrlLoading(view, request); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
3. 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息
//允许alert弹出
mWebview.setWebChromeClient(new WebChromeClient(){ @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, result); } @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { return super.onJsPrompt(view, url, message, defaultValue, result); } @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { return super.onJsConfirm(view, url, message, result); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
谢谢阅读
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/88954213
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）