Android WebView and JS Mutual invocation implementation Method _android

Android-webview and JS call each other

Both Android and H5 are widely used in mobile development applications. Many of the apps on the market are developed using Android, but using Android to develop some of the more complex affiliate classes, the hint page is not worth the candle. And the H5 has the development speed, the update does not depend on the app the update, only needs the service side to update the corresponding page, therefore, the app and the H5 page combination appears especially important. And Android and H5 can not be independent each time, but interact with each other and call each other, get information, for example, H5 page to get the user's basic information in the app, or the app side to operate the H5 page, and so on, let's see how these two interact.

Take a look at the overall architecture of the project (the project in Android Studio)

The whole structure of the project is this, the most important thing is the assets below the Js_ webview.html file and code in the Webviewjsactivity, where the project inside the mainactivity just made a jump, jump to webviewjsactivity. That's it.

The following code: (js_webview.html)

HTML inside the code is also relatively simple, the entire HTML in a button, click on the button to execute JavaScript in the Jscallandroid () method.

The Web page about JavaScript code is also relatively simple, the entire JS on 2 methods, one is jscallandroid (), one is Androidcalljs (). Look at the method name is known, respectively, JS calls Android and Android call JS.

Do not go to tube jscallandroid () What is done inside, will explain later, look at Androidcalljs () This method inside do is to pop up a message box, specific hint what information is not important, casually.

Take a look at the Code section (webviewactivity layout file):

The entire layout file is also very simple, a button and a webview, the button is used to test the android call JS used, JS calls Android is of course the WebView loaded page inside the button.

Let's look at the Java Code section (webviewactivity):

Let's look at the code section here:

Line 37-42: These are the clicks of the button in Android, and there's nothing to explain, so what does the Click event do? Click the event to do is: Call the WebView Loadurl method to call the method in JS, the way to call is: in front of the JavaScript in the middle of: separate the last is to call the method name JS.

45-55 lines: These lines are about the setting of the WebView, 46-51 of these lines is to support the window, that is, the support of HTML web frames, because the front of the HTML code, there is our Android call JS, the success of the Call JS window, so here to add this setting. Next is 53 lines, and line 53 refers to supporting JavaScript. This refers to JavaScript parsing that supports HTML, whether it's JS or Android interaction, as long as the page contains JS. The key is 54 lines, 54 lines is JavaScript and Android interaction, the Addjavascriptinterface method needs to accept two parameters, the first is the corresponding JS call the Android local class object, This example is the 58-63 rows of this class object, the second parameter is and the previous page in the JS code in the Jscallandroid method in the Wv.sayhello (), where the WV and this parameter (WV) and the corresponding, and SayHello () is the corresponding method within the object of the first parameter.

Finally, 58-63 lines, these lines have nothing to explain, but if the call succeeds, print a row of logs. This test is only successful if invoked.

The entire demo code to this end, so excited, hurriedly run to try.

Run the result will let a lot of people disappointed, just Android call JS success, but JS call Android unsuccessful.

What is this for? Here is a question about the security of WebView and JS. JS can download malicious code in this way to execute on Android, specific interested can go to Google, so the above writing is only for API16 before the Android phone is applicable, after 16, Google to the security issue has been repaired. Note it to a javascriptinterfface class that is brought by Android. Let's take a look at the wording after 16.

With the annotation, it is almost doubled, very convenient. or the original formula, or the original taste, authentic. Except that the code in the activity needs to be modified, nothing else moves.

Changes in the code has 55 lines, directly to pass a This (context) object on it, then, the original jsinterface can not be. No, where do I write the SayHello method? Since you are transmitting this, of course it is written to this inside slightly (59-62 lines). The difference is that this SayHello () method must be accompanied by a javascriptinterface annotation.

OK, 16 before and 16 after all have, not OK. When you add JavaScript to judge the Api version of it, haha ...

No, no, no, that's definitely not the way to do it. Refers to the need to add a @SuppressLint ("Javascriptinterface") annotation on the OnCreate () method.

Look at the following is the ultimate code.

Yes, that's right, that's it. Done.

The last thing to mention is that the above example can be implemented, under normal circumstances are no problem, but you look at the online demo, a lot of Android call JS when it is open a child thread to call, yes, in actual development, it is necessary to do this. The benefits are self-evident. This looks at the last code map, here also gives, directly call WebView post, inside is the Android call JS.