Android WebView与JS的交互方式
2024-05-08 02:59:23
前言
- 现在很多App都内置了Web网页，比如很多电商App，淘宝、天猫、京东、拼多多、网易考拉等等，那么它们又是如何实现的呢？
- 这里就不得不涉及到Android的WebView控件，通过WebView去动态加载一个Web网页，而Web网页的技术实现又将涉及到Html、css样式、JavaScript（简称JS）这些语言。
- 上述功能无可避免的将会涉及到Android客户端与Web网页交互的实现，所以我们将全面介绍Android通过WebView与JS的交互方式。
目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wnscsuij-1646326025497)(http://note.youdao.com/yws/res/16256/WEBRESOURCE97eda56a256aa12509385a2c65a322b6)]
1、交互方式总结
Android与JS通过WebView互相调用方法：
- Android通过WebView去调用JS的代码
- JS通过WebView去调用Android的代码
对于Android调用JS代码的方法有2种：
- 通过WebView的loadUrl()
- 通过WebView的evaluateJavascript()
对于JS调用Android代码的方法有3种：
- 通过WebView的addJavascriptInterface() 进行对象映射
- 通过WebViewClient的shouldOverrideUrlLoading() 方法回调拦截url
- 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt() 方法回调拦截JS对话框alert()、confirm()、prompt() 消息
2、具体分析
2.1 Android通过WebView调用JS代码
方式1：通过WebView的loadUrl()
- 实例介绍：点击Android按钮，即调用WebView JS中callJS()方法
- 具体使用：
Html代码：Test.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"><head><meta charset="UTF-8"><title>Test</title></head><body><p>这是html内容</p></body><script>// Android需要调用的方法function callJS() {alert("Android调用了JS的callJS方法");}</script>
</html>
Android代码：
mWebView.loadUrl("javascript:callJS()");
方式2：通过WebView的evaluateJavascript()
- 优点：该方法比第一种方法效率更高、使用更简洁。
（1）因为该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。
（2）Android 4.4（即>=19）后才可使用。
- 具体使用：
// 只需要将第一种方法的loadUrl()换成下面该方法即可
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {// 此处为JS返回的结果}
});
2.1.2 方法对比
| 调用方式 | 优点 | 缺点 | 使用场景 |
|---|---|---|---|
| 使用loadUrl() | 方便简洁 | 效率低，获取返回值麻烦 | 不需要获取返回值，对性能要求低时 |
| 使用evaluateJavascript() | 效率高 | 向下兼容性相对较差（仅Android 4.4（>=19）及其以上可用） | Android 4.4（>=19）及其以上可用 |
2.1.3 使用建议
- 两种方式混合使用，即Android 4.4（<19）以下使用方式1，Android 4.4（>=19）以上使用方式2。
- 具体代码示例如下：MainActivity.java
public class MainActivity extends AppCompatActivity {private WebView mWebView;private Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView =(WebView) findViewById(R.id.webview);button = (Button) findViewById(R.id.button);WebSettings webSettings = mWebView.getSettings();// 设置与Js交互的权限webSettings.setJavaScriptEnabled(true);// 设置允许JS弹窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 先载入JS代码，格式规定为:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/Test.html");button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {// 此处为JS返回的结果}});} else {mWebView.loadUrl("javascript:callJS()");}}});// 由于设置了弹窗检验调用结果,所以需要支持js对话框// WebView只是载体，内容的渲染需要使用WebViewChromClient类去实现// 通过设置WebChromeClient对象处理JavaScript的对话框// 设置响应JS的Alert()函数mWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic 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() {@Overridepublic void onClick(DialogInterface dialog, int which) {result.confirm();}});b.setCancelable(false);b.create().show();return true;}});}
}
2.2 JS通过WebView调用Android代码
方式1：通过WebView的addJavascriptInterface() 进行对象映射
- 具体使用：
- 步骤一：定义一个与JS对象映射关系的Android类：WebViewJsBridge.java
public class WebViewJsBridge {@JavascriptInterfacepublic void hello(String msg) {Log.d("WebViewJsBridge", msg);}
}
- 步骤二：将需要调用的JS代码以.html格式放到src/main/assets文件夹里
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"><head><meta charset="UTF-8"><title>Test</title></head><body><p>这是html内容</p><button type="button" id="button1" onclick="callAndroid1()">CallAndroid方式1</button></body><script>function callAndroid1(){// 由于对象映射，所以调用Android对象等于调用Android映射的对象Android.hello("js调用了android中的hello方法");}</script>
</html>
- 步骤三：在Android里通过WebView设置Android类与JS代码的映射
public class MainActivity extends AppCompatActivity {private WebView mWebView;private Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView =(WebView) findViewById(R.id.webview);button = (Button) findViewById(R.id.button);WebSettings webSettings = mWebView.getSettings();// 设置与JS交互的权限webSettings.setJavaScriptEnabled(true);// 设置允许JS弹窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 通过addJavascriptInterface()将Java对象映射到JS对象// 参数1：JavaScript对象名，参数2：Java对象名// WebViewJsBridge类对象映射到JS的Android对象mWebView.addJavascriptInterface(new WebViewJsBridge(), "Android");// 先载入JS代码，格式规定为:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/Test.html");}
}
- 优缺点：
优点：使用简单，仅将Android对象和JS对象映射即可
缺点：存在严重的漏洞问题
方式2：通过WebViewClient的shouldOverrideUrlLoading() 回调拦截url
- 具体原理：
（1）Android通过WebViewClient的回调方法==shouldOverrideUrlLoading()==拦截url
（2）解析该url的协议
（3）如果检测到是预先约定好的协议，就调用相应方法
- 具体使用：
- 步骤一：在JS约定所需要的Url协议
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"><head><meta charset="UTF-8"><title>Test</title></head><body><p>这是html内容</p><button type="button" id="button2" onclick="callAndroid2()">CallAndroid方式2</button></body><script>function callAndroid2(){// 约定的url协议为：js://webview?arg1=111&arg2=222document.location = "js://webview?arg1=111&arg2=222";}</script>
</html>
- 步骤二：在Android通过WebViewClient复写shouldOverrideUrlLoading()
public class MainActivity extends AppCompatActivity {private WebView mWebView;private Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView =(WebView) findViewById(R.id.webview);button = (Button) findViewById(R.id.button);WebSettings webSettings = mWebView.getSettings();// 设置与JS交互的权限webSettings.setJavaScriptEnabled(true);// 设置允许JS弹窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 先载入JS代码，格式规定为:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/Test.html");// 复写WebViewClient类的shouldOverrideUrlLoading方法mWebView.setWebViewClient(new WebViewClient() {// 该重载方法不建议使用了，7.0系统以上已经摒弃了// shouldOverrideUrlLoading(WebView view, String url)此方法，// 如果要拦截URL，需要做兼容性处理，重写// shouldOverrideUrlLoading(WebView view, WebResourceRequest request)方法，// 获取得到的可正常使用的URL@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {return super.shouldOverrideUrlLoading(view, url);}@Overridepublic boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {// 根据协议的参数，判断是否是所需要的url// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）// 假定传入进来的url="js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）Uri uri;if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {uri = request.getUrl();} else {uri = Uri.parse(request.toString());}// 如果url的协议 = 预先约定的 js 协议,就解析往下解析参数if (uri.getScheme().equals("js")) {// 如果 authority = 预先约定协议里的webview，即代表都符合约定的协议// 所以拦截url,下面JS开始调用Android需要的方法if (uri.getAuthority().equals("webview")) {//执行JS所需要调用的逻辑Log.d("TAG","JS调用了Android的方法");// 可以在协议上带有参数并传递到Android上HashMap<String, String> params = new HashMap<>();Set<String> collection = uri.getQueryParameterNames();String result = "Android回调给JS的数据为useid=123456";view.loadUrl("javascript:returnResult(\"" + result + "\")");}return true;}return super.shouldOverrideUrlLoading(view, request);}});}
}
- 优缺点：
优点：不存在方式1的漏洞
缺点：JS获取Android方法的返回值复杂，如果JS想要得到Android方法的返回值，只能通过WebView的 loadUrl()去执行JS方法把返回值传递回去，相关的代码如下：
// Android：MainActivity.java
mWebView.loadUrl("javascript:returnResult(" + result + ")");// JS：Test.html
function returnResult(result){alert("result is" + result);
}
方式3：通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt() 方法回调拦截JS对话框alert()、confirm()、prompt() 消息
- JS中常用的对话框方法：
| 方法 | 作用 | 返回值 | 备注 |
|---|---|---|---|
| alert() | 弹出警告框 | 没有 | 在文本加入\n可换行 |
| confirm() | 弹出确认框 | 两个返回值 | 返回布尔值，通过该值可以判断点击时是确认还是取消，true表示确认，false表示取消 |
| prompt() | 弹出输入框 | 任意设置返回值 | 点击确认返回输入框的值，点击取消返回null |
- 下面的例子将用拦截JS的输入框（即prompt()方法）说明：
（1）常用的拦截是：拦截 JS的输入框（即prompt（）方法）。
（2）因为只有prompt()可以返回任意类型的值，操作最全面方便、更加灵活；而alert()对话框没有返回值；confirm()对话框只能返回两种状态（确定 / 取消）两个值。
- 步骤1：加载Html代码，如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"><head><meta charset="UTF-8"><title>Carson_Ho</title></head><body><p>这是html内容</p><button type="button" id="button3" onclick="callAndroid2()">CallAndroid方式3</button></body><script>function callAndroid3(){// 调用prompt()var result=prompt("js://webview?arg1=111&arg2=222");alert("demo " + result);}</script>
</html>
- 步骤2：在Android通过WebChromeClient复写onJsPrompt()
public class MainActivity extends AppCompatActivity {private WebView mWebView;private Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView =(WebView) findViewById(R.id.webview);button = (Button) findViewById(R.id.button);WebSettings webSettings = mWebView.getSettings();// 设置与JS交互的权限webSettings.setJavaScriptEnabled(true);// 设置允许JS弹窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 先载入JS代码，格式规定为:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/Test.html");// 由于设置了弹窗检验调用结果,所以需要支持js对话框// WebView只是载体，内容的渲染需要使用WebViewChromClient类去实现// 通过设置WebChromeClient对象处理JavaScript的对话框// 设置响应JS的Alert()函数mWebView.setWebChromeClient(new WebChromeClient() {// 拦截输入框(原理同方式shouldOverrideUrlLoading)// 参数message:代表promt())的内容（不是url）// 参数result:代表输入框的返回值@Overridepublic 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("webview")) {// 执行JS所需要调用的逻辑System.out.println("js调用了Android的方法");// 可以在协议上带有参数并传递到Android上HashMap<String, String> params = new HashMap<>();Set<String> collection = uri.getQueryParameterNames();//参数result:代表消息框的返回值(输入值)result.confirm("Android回调给JS的数据为useid=123456");}return true;}return super.onJsPrompt(view, url, message, defaultValue, result);}// 拦截JS的警告框@Overridepublic boolean onJsAlert(WebView view, String url, String message, final JsResult result) {return super.onJsAlert(view, url, message, result);}// 拦截JS的确认框@Overridepublic boolean onJsConfirm(WebView view, String url, String message, JsResult result) {return super.onJsConfirm(view, url, message, result);}});}
}
2.2.2 三种方式对比 & 使用场景
| 调用方式 | 优点 | 缺点 | 使用场景 |
|---|---|---|---|
| 通过addJavascriptInterface()进行添加对象映射 | 方便简洁 | Android 4.2（<17）以下存在漏洞问题 | Android 4.2（>=17）以上相对简单互调场景 |
| 通过WebViewClient的方法shouldOverrideUrlLoading()回调拦截url | 不存在漏洞 | 使用复杂，需要进行协议约束，从Native层往Web层传递值比较繁琐 | 不需要返回值情况下的互调场景（iOS主要使用该方式） |
| 通过WebChromeClient的onJsPrompt()、onJsAlert()、onJsConfirm()方法回调拦截JS对话框消息 | 不存在漏洞 | 使用复杂，需要进行协议约束 | 能满足大多数情况下的互调场景 |
3、归纳总结
| 类型 | 调用方式 | 优点 | 缺点 | 使用场景 | 使用建议 |
|---|---|---|---|---|---|
| Android调用JS | loadUrl() | 方便简洁 | 效率低，获取返回值麻烦 | 不需要获取返回值，对性能要求低时 | 混合使用 |
| Android调用JS | evaluateJavascript() | 效率高 | 向下兼容性相对较差（仅Android 4.4（>=19）及其以上可用） | Android 4.4（>=19）及其以上可用 | 混合使用 |
| JS调用Android | 通过addJavascriptInterface()进行添加对象映射 | 方便简洁 | Android 4.2（<17）以下存在漏洞问题 | Android 4.2（>=17）以上相对简单互调场景 | |
| JS调用Android | 通过WebViewClient的方法shouldOverrideUrlLoading()回调拦截url | 不存在漏洞 | 使用复杂，需要进行协议约束，从Native层往Web层传递值比较繁琐 | 不需要返回值情况下的互调场景（iOS主要使用该方式） | |
| JS调用Android | 通过WebChromeClient的onJsPrompt()、onJsAlert()、onJsConfirm()方法回调拦截JS对话框消息 | 不存在漏洞 | 使用复杂，需要进行协议约束 | 能满足大多数情况下的互调场景 |
4、开发时遇见过的问题
（1）Alert无法弹出
- 没有设置WebChromeClient,按照以下代码设置：
webView.setWebChromeClient(new WebChromeClient());
（2）Uncaught ReferenceError: functionName is not defined
- 问题出现原因，网页的JS代码没有加载完成，就调用了js方法。解决方法是在网页加载完成之后调用JS方法。例如：刚打开html页面，就去调用JS中的returnResult方法
webview.loadUrl("file:///android_asset/Test.html");String result = "Android回调给JS的数据为useid=123456";
webview.loadUrl("javascript:returnResult(\"" + result + "\")");
- 解决方法，按照以下代码设置：
webview.setWebViewClient(new WebViewClient(){@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);String result = "Android回调给JS的数据为useid=123456";webview.loadUrl("javascript:returnResult(\"" + result + "\")");}
});
（3）Uncaught TypeError: Object [object Object] has no method
- 安全限制问题，出现在Android4.2以上的机器。
- 解决方法： 将targetSdkVersion设置成17或更高，引入@JavascriptInterface注释。
- 代码混淆问题，如果在没有混淆的版本运行正常，在混淆后的版本的代码运行错误，并提示Uncaught TypeError: Object [object Object] has no method，那就是你没有做混淆例外处理。 在混淆文件加入类似这样的代码，解决方法：
在proguard-rules.pro中添加混淆。
-keepattributes *Annotation*
-keepattributes *JavascriptInterface*
-keep public class xx.xxx.JSKit{public <methods>;
}
其中xx.xxx..JSKit 是不需要混淆的类
（4）All WebView methods must be called on the same thread
- 在JS调用后的Java回调线程并不是主线程。解决上述的异常，将webview操作放在主线程中即可。
webView.post(new Runnable() {@Overridepublic void run() {webView.loadUrl(YOUR_URL).}
});
Android WebView与JS的交互方式相关推荐
- Android WebView注入js文件，判断当前HTML有没有某个js然后再注入
Android WebView注入js文件,判断当前HTML有没有某个js然后再注入 1.注入js代码 判断当前有没有jQuery文件引入,然后再进行注入. 判断依据其实很简单,获取script 的d ...
- android webView 与 JS交互方式
webView 与JS交互 Android调用JS代码的方法有: 通过WebView的loadUrl() 通过WebView的evaluateJavascript() 对于JS调用Android代码的 ...
- Android—WebView与JS交互
Html文件: WebView与JS交互方式: 1. 前提: WebSettings webSettings = webView.getSettings(); // 设置与Js交互的权限 webSet ...
- Android WebView 与 JS 交互
2019独角兽企业重金招聘Python工程师标准>>> 在android activity webView的使用,activity中执行html中的js 方法, 和在html 中 调 ...
- android webview 监听js,Android webview与js的数据交互
项目要用到Webview和js交互,查了查以前的项目感觉还是有必要整理下的. 简单描述下项目中用到的地方,比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录,点击web页的拨打电 ...
- Android WebView与JS交互入门
2019独角兽企业重金招聘Python工程师标准>>> 首先在Anndroid代码中对WebView进行初始化 webView = (WebView) findViewById(R. ...
- android webview调js方法,Android中WebView与H5的交互，Native与JS方法互调
项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...
- js获取android数据,Android webview与js的数据交互
项目要用到Webview和js交互,查了查以前的项目感觉还是有必要整理下的. 简单描述下项目中用到的地方,比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录,点击web页的拨打电 ...
- android WebView中js的alert()失效
WebView的设置代码 wv = (WebView) findViewById(R.id.webView1); wv.getSettings().setJavaScriptEnabled(true) ...
最新文章
- Windows窗口的建立
- 查看tp框架版本方法
- 目录树 删除 数据结构_数据结构：B树和B+树的插入、删除图文详解
- 质数筛（洛谷P5736题题解，Java语言描述）
- 012-Java有几种文件拷贝方式？哪一种最高效？
- pandas 空字符串与na区别_python从安装到数据分析应用高手 Pandas处理文本数据（一）...
- 深层神经网络——线性模型的局限性
- 【10.1】python中的GIL
- 2020 年，你还在使用 Java 中的 SimpleDateFormat 吗？
- HTML中select的option设置selected=“selected“无效的解决方案
- 在linux上使用labelImg制作LMDB数据集——备忘TX2上运行
- HDU - 6273 Master of GCD
- VN2VN——中小企业的网络融合之道
- 荣登Github日榜！微信最新开源MMKV
- aptana php插件使用教程,用Aptana Studio 1.5开发PHP,很强的PHP IDE,Aptana PHP,简介,安装教程...
- 微信小程序商城项目（篇7）：商城详情页实现
- python from win32com import client 出现弹框 隐藏模块中出现编译错误
- C/C++面试高频知识点八股文
- 【Spark NLP】第 8 章：使用 Keras 进行序列建模
- 以太网数据包速率计算方法