轉(zhuǎn)載：https://blog.csdn.net/carson_ho/article/details/64904691
前言
現(xiàn)在很多App里都內(nèi)置了Web網(wǎng)頁(yè)（Hybrid App）胆绊，比如說(shuō)很多電商平臺(tái)，淘寶照筑、京東儒搭、聚劃算等等池颈，如下圖
上述功能是由Android的WebView實(shí)現(xiàn)的贩毕，其中涉及到Android客戶端與Web網(wǎng)頁(yè)交互的實(shí)現(xiàn)
今天我將全面介紹Android通過(guò)WebView與JS交互的全面方式
閱讀本文前請(qǐng)先閱讀：Android開(kāi)發(fā)：最全面、最易懂的Webview詳解
Android與JS通過(guò)WebView互相調(diào)用方法亥啦，實(shí)際上是：
Android去調(diào)用JS的代碼
JS去調(diào)用Android的代碼
二者溝通的橋梁是WebView
對(duì)于Android調(diào)用JS代碼的方法有2種：?
1. 通過(guò)WebView的loadUrl（）?
2. 通過(guò)WebView的evaluateJavascript（）
對(duì)于JS調(diào)用Android代碼的方法有3種：?
1. 通過(guò)WebView的addJavascriptInterface（）進(jìn)行對(duì)象映射?
2. 通過(guò)?WebViewClient?的shouldOverrideUrlLoading ()方法回調(diào)攔截 url?
3. 通過(guò)?WebChromeClient?的onJsAlert()炭剪、onJsConfirm()、onJsPrompt（）方法回調(diào)攔截JS對(duì)話框alert()禁悠、confirm()念祭、prompt（）?消息
2.1 Android通過(guò)WebView調(diào)用 JS 代碼
對(duì)于Android調(diào)用JS代碼的方法有2種：?
1. 通過(guò)WebView的loadUrl（）?
2. 通過(guò)WebView的evaluateJavascript（）
實(shí)例介紹：點(diǎn)擊Android按鈕，即調(diào)用WebView JS（文本名為javascript）中callJS（）
具體使用：
步驟1：將需要調(diào)用的JS代碼以.html格式放到src/main/assets文件夾里
為了方便展示碍侦，本文是采用Andorid調(diào)用本地JS代碼說(shuō)明粱坤；
實(shí)際情況時(shí)，Android更多的是調(diào)用遠(yuǎn)程JS代碼瓷产，即將加載的JS代碼路徑改成url即可
需要加載JS代碼：javascript.html
// 文本名：javascriptCarson_Ho// JS代碼// Android需要調(diào)用的方法functioncallJS(){alert("Android調(diào)用了JS的callJS方法");? }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
步驟2：在Android里通過(guò)WebView設(shè)置調(diào)用JS代碼
Android代碼：MainActivity.java
注釋已經(jīng)非常清楚
publicclassMainActivityextendsAppCompatActivity{WebView mWebView;? ? Button button;@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);? ? ? ? setContentView(R.layout.activity_main);? ? ? ? mWebView =(WebView) findViewById(R.id.webview);? ? ? ? WebSettings webSettings = mWebView.getSettings();// 設(shè)置與Js交互的權(quán)限webSettings.setJavaScriptEnabled(true);// 設(shè)置允許JS彈窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 先載入JS代碼// 格式規(guī)定為:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/javascript.html");? ? ? ? button = (Button) findViewById(R.id.button);? ? ? ? button.setOnClickListener(newView.OnClickListener() {@OverridepublicvoidonClick(View v) {// 通過(guò)Handler發(fā)送消息mWebView.post(newRunnable() {@Overridepublicvoidrun() {// 注意調(diào)用的JS方法名要對(duì)應(yīng)上// 調(diào)用javascript的callJS()方法mWebView.loadUrl("javascript:callJS()");? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? });? ? ? ? ? ? }? ? ? ? });// 由于設(shè)置了彈窗檢驗(yàn)調(diào)用結(jié)果,所以需要支持js對(duì)話框// webview只是載體站玄，內(nèi)容的渲染需要使用webviewChromClient類去實(shí)現(xiàn)// 通過(guò)設(shè)置WebChromeClient對(duì)象處理JavaScript的對(duì)話框//設(shè)置響應(yīng)js 的Alert()函數(shù)mWebView.setWebChromeClient(newWebChromeClient() {@OverridepublicbooleanonJsAlert(WebView view, String url, String message,finalJsResult result) {? ? ? ? ? ? ? ? AlertDialog.Builder b =newAlertDialog.Builder(MainActivity.this);? ? ? ? ? ? ? ? b.setTitle("Alert");? ? ? ? ? ? ? ? b.setMessage(message);? ? ? ? ? ? ? ? b.setPositiveButton(android.R.string.ok,newDialogInterface.OnClickListener() {@OverridepublicvoidonClick(DialogInterface dialog,intwhich) {? ? ? ? ? ? ? ? ? ? ? ? result.confirm();? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? });? ? ? ? ? ? ? ? b.setCancelable(false);? ? ? ? ? ? ? ? b.create().show();returntrue;? ? ? ? ? ? }? ? ? ? });? ? }}
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
特別注意：JS代碼調(diào)用一定要在?onPageFinished（）?回調(diào)之后才能調(diào)用，否則不會(huì)調(diào)用濒旦。
onPageFinished()屬于WebViewClient類的方法株旷，主要在頁(yè)面加載結(jié)束時(shí)調(diào)用
方式2：通過(guò)WebView的evaluateJavascript（）
優(yōu)點(diǎn)：該方法比第一種方法效率更高、使用更簡(jiǎn)潔。
因?yàn)樵摲椒ǖ膱?zhí)行不會(huì)使頁(yè)面刷新晾剖，而第一種方法（loadUrl ）的執(zhí)行則會(huì)锉矢。
Android 4.4 后才可使用
具體使用
// 只需要將第一種方法的loadUrl()換成下面該方法即可mWebView.evaluateJavascript（"javascript:callJS()",newValueCallback() {? ? ? ? @OverridepublicvoidonReceiveValue(Stringvalue) {//此處為 js 返回的結(jié)果}? ? });}
1
2
3
4
5
6
7
8
兩種方法混合使用，即Android 4.4以下使用方法1齿尽，Android 4.4以上方法2
// Android版本變量finalintversion = Build.VERSION.SDK_INT;// 因?yàn)樵摲椒ㄔ?Android 4.4 版本才可使用沽损，所以使用時(shí)需進(jìn)行版本判斷if(version <18) {? ? mWebView.loadUrl("javascript:callJS()");}else{? ? mWebView.evaluateJavascript（"javascript:callJS()",newValueCallback() {@OverridepublicvoidonReceiveValue(String value) {//此處為 js 返回的結(jié)果}? ? });}
1
2
3
4
5
6
7
8
9
10
11
12
13
2.2 JS通過(guò)WebView調(diào)用 Android 代碼
對(duì)于JS調(diào)用Android代碼的方法有3種：?
1. 通過(guò)WebView的addJavascriptInterface（）進(jìn)行對(duì)象映射?
2. 通過(guò)?WebViewClient?的shouldOverrideUrlLoading ()方法回調(diào)攔截 url?
3. 通過(guò)?WebChromeClient?的onJsAlert()、onJsConfirm()循头、onJsPrompt（）方法回調(diào)攔截JS對(duì)話框alert()绵估、confirm()、prompt（）?消息
方式1：通過(guò)?WebView的addJavascriptInterface（）進(jìn)行對(duì)象映射
步驟1：定義一個(gè)與JS對(duì)象映射關(guān)系的Android類：AndroidtoJs
AndroidtoJs.java（注釋已經(jīng)非常清楚）
// 繼承自O(shè)bject類publicclassAndroidtoJsextendsObject{// 定義JS需要調(diào)用的方法// 被JS調(diào)用的方法必須加入@JavascriptInterface注解@JavascriptInterfacepublicvoidhello(String msg) {? ? ? ? System.out.println("JS調(diào)用了Android的hello方法");? ? }}
1
2
3
4
5
6
7
8
9
10
步驟2：將需要調(diào)用的JS代碼以.html格式放到src/main/assets文件夾里
需要加載JS代碼：javascript.html
CarsonfunctioncallAndroid(){// 由于對(duì)象映射卡骂，所以調(diào)用test對(duì)象等于調(diào)用Android映射的對(duì)象test.hello("js調(diào)用了android中的hello方法");? ? ? ? }//點(diǎn)擊按鈕則調(diào)用callAndroid函數(shù)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
步驟3：在Android里通過(guò)WebView設(shè)置Android類與JS代碼的映射
詳細(xì)請(qǐng)看注釋
publicclassMainActivityextendsAppCompatActivity{WebView mWebView;@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);? ? ? ? setContentView(R.layout.activity_main);? ? ? ? mWebView = (WebView) findViewById(R.id.webview);? ? ? ? WebSettings webSettings = mWebView.getSettings();// 設(shè)置與Js交互的權(quán)限webSettings.setJavaScriptEnabled(true);// 通過(guò)addJavascriptInterface()將Java對(duì)象映射到JS對(duì)象//參數(shù)1：Javascript對(duì)象名//參數(shù)2：Java對(duì)象名mWebView.addJavascriptInterface(newAndroidtoJs(),"test");//AndroidtoJS類對(duì)象映射到j(luò)s的test對(duì)象// 加載JS代碼// 格式規(guī)定為:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/javascript.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
優(yōu)點(diǎn)：使用簡(jiǎn)單
僅將Android對(duì)象和JS對(duì)象映射即可
缺點(diǎn)：存在嚴(yán)重的漏洞問(wèn)題国裳，具體請(qǐng)看文章：你不知道的 Android WebView 使用漏洞
方式2：通過(guò)?WebViewClient?的方法shouldOverrideUrlLoading ()回調(diào)攔截 url
具體原理：?
Android通過(guò)?WebViewClient?的回調(diào)方法shouldOverrideUrlLoading ()攔截 url
解析該 url 的協(xié)議
如果檢測(cè)到是預(yù)先約定好的協(xié)議，就調(diào)用相應(yīng)方法?
即JS需要調(diào)用Android的方法
具體使用：?
步驟1：在JS約定所需要的Url協(xié)議?
JS代碼：javascript.html
以.html格式放到src/main/assets文件夾里
Carson_HofunctioncallAndroid(){/*約定的url協(xié)議為：js://webview?arg1=111&arg2=222*/document.location ="js://webview?arg1=111&arg2=222";? ? ? ? }點(diǎn)擊調(diào)用Android代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
當(dāng)該JS通過(guò)Android的mWebView.loadUrl("file:///android_asset/javascript.html")加載后全跨，就會(huì)回調(diào)shouldOverrideUrlLoading （）缝左，接下來(lái)繼續(xù)看步驟2：
步驟2：在Android通過(guò)WebViewClient復(fù)寫(xiě)shouldOverrideUrlLoading （）
MainActivity.java
publicclassMainActivityextendsAppCompatActivity{WebView mWebView;//? ? Button button;@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);? ? ? ? setContentView(R.layout.activity_main);? ? ? ? mWebView = (WebView) findViewById(R.id.webview);? ? ? ? WebSettings webSettings = mWebView.getSettings();// 設(shè)置與Js交互的權(quán)限webSettings.setJavaScriptEnabled(true);// 設(shè)置允許JS彈窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 步驟1：加載JS代碼// 格式規(guī)定為:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/javascript.html");// 復(fù)寫(xiě)WebViewClient類的shouldOverrideUrlLoading方法mWebView.setWebViewClient(newWebViewClient() {@OverridepublicbooleanshouldOverrideUrlLoading(WebView view, String url) {// 步驟2：根據(jù)協(xié)議的參數(shù)，判斷是否是所需要的url// 一般根據(jù)scheme（協(xié)議格式） & authority（協(xié)議名）判斷（前兩個(gè)參數(shù)）//假定傳入進(jìn)來(lái)的 url = "js://webview?arg1=111&arg2=222"（同時(shí)也是約定好的需要攔截的）Uri uri = Uri.parse(url);// 如果url的協(xié)議 = 預(yù)先約定的 js 協(xié)議// 就解析往下解析參數(shù)if( uri.getScheme().equals("js")) {// 如果 authority? = 預(yù)先約定協(xié)議里的 webview螟蒸，即代表都符合約定的協(xié)議// 所以攔截url,下面JS開(kāi)始調(diào)用Android需要的方法if(uri.getAuthority().equals("webview")) {//? 步驟3：// 執(zhí)行JS所需要調(diào)用的邏輯System.out.println("js調(diào)用了Android的方法");// 可以在協(xié)議上帶有參數(shù)并傳遞到Android上HashMap params =newHashMap<>();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Set collection = uri.getQueryParameterNames();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }returntrue;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }returnsuper.shouldOverrideUrlLoading(view, url);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? );? }? ? ? ? }
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
優(yōu)點(diǎn)：不存在方式1的漏洞盒使；
缺點(diǎn)：JS獲取Android方法的返回值復(fù)雜。?
如果JS想要得到Android方法的返回值七嫌，只能通過(guò) WebView 的?loadUrl （）去執(zhí)行 JS 方法把返回值傳遞回去少办，相關(guān)的代碼如下：
// Android：MainActivity.javamWebView.loadUrl("javascript:returnResult("+ result +")");// JS：javascript.htmlfunctionreturnResult(result){alert("result is"+ result);}
1
2
3
4
5
6
7
在JS中绍赛，有三個(gè)常用的對(duì)話框方法：
方式3的原理：Android通過(guò)?WebChromeClient?的onJsAlert()蔓纠、onJsConfirm()、onJsPrompt（）方法回調(diào)分別攔截JS對(duì)話框?
（即上述三個(gè)方法）吗蚌，得到他們的消息內(nèi)容腿倚，然后解析即可。
下面的例子將用攔截 JS的輸入框（即prompt（）方法）說(shuō)明 ：
常用的攔截是：攔截 JS的輸入框（即prompt（）方法）
因?yàn)橹挥衟rompt（）可以返回任意類型的值蚯妇，操作最全面方便敷燎、更加靈活；而alert（）對(duì)話框沒(méi)有返回值箩言；confirm（）對(duì)話框只能返回兩種狀態(tài)（確定 / 取消）兩個(gè)值
步驟1：加載JS代碼硬贯，如下：?
javascript.html
以.html格式放到src/main/assets文件夾里
Carson_Hofunctionclickprompt(){// 調(diào)用prompt（）varresult=prompt("js://demo?arg1=111&arg2=222");? ? alert("demo "+ result);}點(diǎn)擊調(diào)用Android代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
當(dāng)使用mWebView.loadUrl("file:///android_asset/javascript.html")加載了上述JS代碼后，就會(huì)觸發(fā)回調(diào)onJsPrompt（）陨收，具體如下：
如果是攔截警告框（即alert()）饭豹，則觸發(fā)回調(diào)onJsAlert（）；
如果是攔截確認(rèn)框（即confirm()），則觸發(fā)回調(diào)onJsConfirm（）拄衰；
步驟2：在Android通過(guò)WebChromeClient復(fù)寫(xiě)onJsPrompt（）
publicclassMainActivityextendsAppCompatActivity{WebView mWebView;//? ? Button button;@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);? ? ? ? setContentView(R.layout.activity_main);? ? ? ? mWebView = (WebView) findViewById(R.id.webview);? ? ? ? WebSettings webSettings = mWebView.getSettings();// 設(shè)置與Js交互的權(quán)限webSettings.setJavaScriptEnabled(true);// 設(shè)置允許JS彈窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 先加載JS代碼// 格式規(guī)定為:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/javascript.html");? ? ? ? mWebView.setWebChromeClient(newWebChromeClient() {// 攔截輸入框(原理同方式2)// 參數(shù)message:代表promt（）的內(nèi)容（不是url）// 參數(shù)result:代表輸入框的返回值@OverridepublicbooleanonJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {// 根據(jù)協(xié)議的參數(shù)它褪，判斷是否是所需要的url(原理同方式2)// 一般根據(jù)scheme（協(xié)議格式） & authority（協(xié)議名）判斷（前兩個(gè)參數(shù)）//假定傳入進(jìn)來(lái)的 url = "js://webview?arg1=111&arg2=222"（同時(shí)也是約定好的需要攔截的）Uri uri = Uri.parse(message);// 如果url的協(xié)議 = 預(yù)先約定的 js 協(xié)議// 就解析往下解析參數(shù)if( uri.getScheme().equals("js")) {// 如果 authority? = 預(yù)先約定協(xié)議里的 webview，即代表都符合約定的協(xié)議// 所以攔截url,下面JS開(kāi)始調(diào)用Android需要的方法if(uri.getAuthority().equals("webview")) {//// 執(zhí)行JS所需要調(diào)用的邏輯System.out.println("js調(diào)用了Android的方法");// 可以在協(xié)議上帶有參數(shù)并傳遞到Android上HashMap params =newHashMap<>();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Set collection = uri.getQueryParameterNames();//參數(shù)result:代表消息框的返回值(輸入值)result.confirm("js調(diào)用了Android的方法成功啦");? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }returntrue;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }returnsuper.onJsPrompt(view, url, message, defaultValue, result);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }// 通過(guò)alert()和confirm()攔截的原理相同肾砂，此處不作過(guò)多講述// 攔截JS的警告框@OverridepublicbooleanonJsAlert(WebView view, String url, String message, JsResult result) {returnsuper.onJsAlert(view, url, message, result);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }// 攔截JS的確認(rèn)框@OverridepublicbooleanonJsConfirm(WebView view, String url, String message, JsResult result) {returnsuper.onJsConfirm(view, url, message, result);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? );? ? ? ? ? ? }? ? ? ? }
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
Demo地址?
上述所有代碼均存放在：Carson_Ho的Github地址 ： WebView Demo
2.2.2 三種方式的對(duì)比 & 使用場(chǎng)景
本文主要對(duì)Android通過(guò)WebView與JS的交互方式進(jìn)行了全面介紹
關(guān)于WebView的系列文章對(duì)你有所幫助?
