前言
-
現在很多App里都內置了Web網頁（Hyprid App），比如說很多電商平臺，淘寶、京東、聚劃算等等，如下圖
-
上述功能是由Android的WebView實現的，其中涉及到Android客戶端與Web網頁交互的實現
-
今天我將全面介紹Android通過WebView與JS交互的全面方式
閱讀本文前請先閱讀：Android開發：全面、易懂的Webview詳解
目錄
1. 交互方式總結
Android與JS通過WebView互相調用方法，實際上是：
-
Android去調用JS的代碼
-
JS去調用Android的代碼
二者溝通的橋梁是WebView
對于Android調用JS代碼的方法有2種：
1. 通過WebView的loadUrl（）
2. 通過WebView的evaluateJavascript（）
對于JS調用Android代碼的方法有3種：
1. 通過WebView的addJavascriptInterface（）進行對象映射
2. 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調攔截 url
3. 通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（） 消息
2. 具體分析
2.1 Android通過WebView調用 JS 代碼
對于Android調用JS代碼的方法有2種：
-
通過
WebView的loadUrl（）
-
通過
WebView的evaluateJavascript（）
方式1：通過WebView的loadUrl（）
-
實例介紹：點擊Android按鈕，即調用WebView JS（文本名為
javascript）中callJS（）
-
具體使用：
步驟1：將需要調用的JS代碼以.html格式放到src/main/assets文件夾里
-
為了方便展示，本文是采用Andorid調用本地JS代碼說明；
-
實際情況時，Android更多的是調用遠程JS代碼，即將加載的JS代碼路徑改成url即可
需要加載JS代碼：JavaScript.html
// 文本名：javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson_Ho</title> // JS代碼 <script> function callJS(){ alert("Android調用了JS的callJS方法");
} </script> </head> </html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
步驟2：在Android里通過WebView設置調用JS代碼
Android代碼：MainActivity.Java
注釋已經非常清楚
public class MainActivity extends AppCompatActivity { WebView mWebView;
Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView =(WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); mWebView.loadUrl("file:///android_asset/javascript.html");
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mWebView.post(new Runnable() { @Override public void run() { mWebView.loadUrl("javascript:callJS()");
}
});
}
}); 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;
}
});
}
}
-
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
-
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代碼調用一定要在 onPageFinished（） 回調之后才能調用，否則不會調用。
onPageFinished()屬于WebViewClient類的方法，主要在頁面加載結束時調用
方式2：通過WebView的evaluateJavascript（）
-
優點：該方法比種方法效率更高、使用更簡潔。
-
因為該方法的執行不會使頁面刷新，而種方法（loadUrl ）的執行則會。
-
Android 4.4 后才可使用
-
具體使用
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override public void onReceiveValue(String value) { }
});
}
2.1.2 方法對比
2.1.3 使用建議
兩種方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2
final int version = Build.VERSION.SDK_INT; if (version < 18) {
mWebView.loadUrl("javascript:callJS()");
} else {
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { }
});
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
2.2 JS通過WebView調用 Android 代碼
對于JS調用Android代碼的方法有3種：
1. 通過WebView的addJavascriptInterface（）進行對象映射
2. 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調攔截 url
3. 通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（） 消息
2.2.1 方法分析
方式1：通過 WebView的addJavascriptInterface（）進行對象映射
步驟1：定義一個與JS對象映射關系的Android類：AndroidtoJs
AndroidtoJs.java（注釋已經非常清楚）
public class AndroidtoJs extends Object { @JavascriptInterface public void hello(String msg) {
System.out.println("JS調用了Android的hello方法");
}
}
步驟2：將需要調用的JS代碼以.html格式放到src/main/assets文件夾里
需要加載JS代碼：javascript.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson</title> <script> function callAndroid(){ test.hello("js調用了android中的hello方法");
} </script> </head> <body> //點擊按鈕則調用callAndroid函數 <button type="button" id="button1" onclick="callAndroid()"></button> </body> </html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
步驟3：在Android里通過WebView設置Android類與JS代碼的映射
詳細請看注釋
public class MainActivity extends AppCompatActivity { WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); mWebView.addJavascriptInterface(new AndroidtoJs(), "test"); mWebView.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
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
特點
方式2：通過 WebViewClient 的方法shouldOverrideUrlLoading ()回調攔截 url
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson_Ho</title> <script> function callAndroid(){ document.location = "js://webview?arg1=111&arg2=222";
} </script> </head> <body> <button type="button" id="button1" onclick="callAndroid()">點擊調用Android代碼</button> </body> </html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
當該JS通過Android的mWebView.loadUrl("file:///android_asset/javascript.html")加載后，就會回調shouldOverrideUrlLoading （），接下來繼續看步驟2：
步驟2：在Android通過WebViewClient復寫shouldOverrideUrlLoading （）
MainActivity.java
public class MainActivity extends AppCompatActivity { WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); mWebView.loadUrl("file:///android_asset/javascript.html"); mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Uri uri = Uri.parse(url); if ( uri.getScheme().equals("js")) { if (uri.getAuthority().equals("webview")) { System.out.println("js調用了Android的方法"); HashMap<String, String> params = new HashMap<>();
Set<String> collection = uri.getQueryParameterNames();
} return true;
} return super.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
-
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
特點
-
優點：不存在方式1的漏洞；
-
缺點：JS獲取Android方法的返回值復雜。
如果JS想要得到Android方法的返回值，只能通過 WebView 的 loadUrl （）去執行 JS 方法把返回值傳遞回去，相關的代碼如下：
mWebView.loadUrl("javascript:returnResult(" + result + ")"); function returnResult(result){ alert("result is" + result);
}
方式3：通過 WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（） 消息
在JS中，有三個常用的對話框方法：
方式3的原理：Android通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調分別攔截JS對話框
（即上述三個方法），得到他們的消息內容，然后解析即可。
下面的例子將用攔截 JS的輸入框（即prompt（）方法）說明 ：
-
常用的攔截是：攔截 JS的輸入框（即
prompt（）方法）
-
因為只有
prompt（）可以返回任意類型的值，操作全面方便、更加靈活；而alert（）對話框沒有返回值；confirm（）對話框只能返回兩種狀態（確定 / 取消）兩個值
步驟1：加載JS代碼，如下：
javascript.html
以.html格式放到src/main/assets文件夾里
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson_Ho</title> <script> function clickprompt(){ var result=prompt("js://demo?arg1=111&arg2=222");
alert("demo " + result);
} </script> </head> <body> <button type="button" id="button1" onclick="clickprompt()">點擊調用Android代碼</button> </body> </html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
當使用mWebView.loadUrl("file:///android_asset/javascript.html")加載了上述JS代碼后，就會觸發回調onJsPrompt（），具體如下：
-
如果是攔截警告框（即
alert()），則觸發回調onJsAlert（）；
-
如果是攔截確認框（即
confirm()），則觸發回調onJsConfirm（）；
步驟2：在Android通過WebChromeClient復寫onJsPrompt（）
public class MainActivity extends AppCompatActivity { WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); mWebView.loadUrl("file:///android_asset/javascript.html");
mWebView.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { Uri uri = Uri.parse(message); if ( uri.getScheme().equals("js")) { if (uri.getAuthority().equals("webview")) { System.out.println("js調用了Android的方法"); HashMap<String, String> params = new HashMap<>();
Set<String> collection = uri.getQueryParameterNames(); result.confirm("js調用了Android的方法成功啦");
} return true;
} return super.onJsPrompt(view, url, message, defaultValue, result);
} @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, 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
-
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
-
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
2.2.2 三種方式的對比 & 使用場景
3. 總結
-
本文主要對Android通過WebView與JS的交互方式進行了全面介紹
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
