Friends often can encounter when using native android webview js calls the android mobile phone camera, photo albums or recording function, such as front-end little sister to write the function of code, in the IOS mobile test no problem, how could a into the android mobile phone function failure, android programmers think your code where there is a problem of configuration, debugging, Finally found or not, so all kinds of Baidu Google, and finally found that it was webView’s own problem (incidentally, teasing, why webview this commonly used control, Google can not optimize it, too many pits!) Well, without further ado, enter the body.

Let’s start with what JS interaction is:

Said popular point is the function of the front end some calls are not the native code, or in some complex page and page, mixed native not as fast as the web, so in the practical project, in many cases are mixed with webView native page of web pages to load the js, it involves the interaction between the two, and the value problem.

Android calls JS methods:

  • LoadUrl () call via WebView (used with API 18 or less)
  • EvaluateJavascript () call via WebView (API > 18 used)

JS calls the Android method:

  • AddJavascriptInterface () via WebView
  • Intercept the URL via the shouldOverrideUrlLoading() callback of the WebViewClient
  • Intercept JS dialog box alert(), Confirm(), prompt() methods via WebChromeClient onJsAlert(), onJsConfirm(), onJsPrompt() method callback
  • Because method 2 and method 3 are complicated, most students use method 1, but method 1 has serious loopholes, so I won’t give too much introduction here.

Android calls the Js method

Results 1, Put the JS codes that need to be tested under SRC /main/ implies folder, the test codes are as follows

2. Configure the wevView property and write a test button to listen for clicks

Due to the results of the test, I put the JS code files into the results of the loading test, the actual project is the loading link, the reason is the same, click the button to monitor results:

3. When Android calls a JS method, it passes the value to JS. Sometimes when Android calls js methods, it is necessary to pass parameters to JS, so we just need to spell the parameters in the JS method called by Android. Int type can be directly spelled in, and string type can be converted into JSON and passed to JS, as shown in the figure:

The result is:

Note when Android calls js methods:

  • If Android calls the JS method just after opening the page, there will be no response in general. The reason is that the JS page has not finished loading, so we need to listen for the page to finish loading to call the JS method
  • When a WebView calls a JS method, it must be called in the main thread

Android calls JS two methods comparison:

JS calls the Android method

AddJavascriptInterface () via WebView

1. When js calls Android methods, it needs an interaction bridge. The name of the interaction bridge must be the same as the name given by Android.

2. The JS code test code is:

3. Click the button in the webpage to listen to the event, it can be seen that JS has successfully called the Toast method of Android:


4, advantages: simple to use disadvantages: there are serious loopholes

Intercept urls via the shouldOverrideUrlLoading() callback of WebViewClient

1. Convention URL protocol

ShouldOverrideUrlLoading (); shouldOverrideUrlLoading()

3. Click the button in the webpage, js successfully calls the Toast method of Android, and there is no problem with parameter transfer:

4. Advantages: There is no vulnerability in method 1. Disadvantages: The method of obtaining return value is complex and requires constraint protocol

3, through WebChromeClient onJsAlert(), onJsConfirm(), onJsPrompt() callback intercept JS dialog box alert(), confirm(), prompt() methods

The most common interception is the JS input field (prompt() method), because only prompt() can return any type of value and is the most comprehensive, convenient and flexible operation

1. Convention URL protocol

2. Intercept and parse the corresponding pop-up method in the copycat WebChromeClient class on Android

ShouldOverrideUrlLoading () is the same as shouldOverrideUrlLoading()

4. Advantages: There is no vulnerability. Disadvantages: The method to obtain the return value is complex and requires constraint protocol

Complex interaction between Android and JS

Here’s an example: JS needs to select the photo function of android phone album when clicking a button on the page. After selecting the photo, Android programmer needs to upload the image to the background server, and then transfer the image link to H5 terminal through loadUrl() or evaluateJavascript() to realize a complex interaction process.

In fact, it is a mixture of simple interactions. As long as you understand the steps and value transfer of simple interactions, I believe you will be able to handle even complicated interactions.