Source: https://75team.com/post/android-webview-and-js.html
The client invokes JS
loadUrl()
The client can directly access the javascript:console.log(‘hello’) pseudo-URL to inject the JAVASCRIPT code that needs to be executed on the page. The call method is as follows:
Webview webview = (WebView) findViewById(R.id.webView);
webView.loadUrl("javascript:console.log('hello')");
Copy the code
This completes the purpose of calling JS.
JS invokes the client
JS calls the client more methods, can be divided into injection mapping and method hijacking two. Injection mapping mainly maps Java objects to JS objects using the officially provided addJavascriptInterface() method. Method hijacking is the use of JS system method calls will have Java event callback, and then in the callback event hijacking, so as to execute the client method.
addJavascriptInterface
The addJavascriptInterface() method is very simple to use, after defining the method object to be called, configure the mapping relationship directly.
Public class SDK extends Object {@javascriptInterface public void hello(String MSG) { System.out.println("Hello World"); Webview = (Webview) findViewById(r.i.webView); webview.addJavascriptInterface(new SDK(),'sdk');
webview.loadUrl('http://imnerd.org'); // Load the page after injectionCopy the code
This allows the sdK.hello () method to execute the client method directly from the loaded page. However, this officially recommended method has remote execution security vulnerabilities on 4.2 and below systems, and should be used with caution for applications requiring 4.2 and below systems.
URL hijacking
URL hijacking is mainly Webview URL hijacking using shouldOverrideUrlLoading(). As can be seen from the name of the method, it is a callback that the Webview intercepts the URL. When a URL jump occurs in the Webview, the callback will be triggered. In this callback we can get the URL provided by the front end. We provide the URL address of the convention protocol to the client for identification, and then execute the corresponding method after successful identification.
WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl('http://imnerd.org');
webview.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if(url.equals('sdk:hello')) {
System.out.println('hello world');
return true;
}
returnsuper.shouldOverrideUrlLoading(view, url); }});Copy the code
Methods hijacked
Similar to URL hijacking, method hijacking is mainly to trigger some callbacks in the Android client when some JS methods are executed, and execute the corresponding client code by identifying front-end parameters. Currently, there are four front-end methods to trigger the corresponding callback method, and the corresponding relationship is as follows:
JS method Client callback alert onJsAlert prompt onJsPrompt Confirm onJsConfirm console.log onConsoleMessageCopy the code
These four methods are grouped together because they are essentially the same, so just define the corresponding callback method. The configuration of the client is as follows:
Private Class hijackWebChromeClient extends WebChromeClient {public Boolean hijack(String text) {if(text.equals('sdk:hello')) {
System.out.println('hello world');
return true;
}
return false;
}
@Override
public boolean onJsPrompt(WebView view, String message, String defaultValue, JSPromptResult result) {
if(this.hijack(message)) {
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
if(this.hijack(message)) {
return true;
}
return super.onJsAlert(view, url, message, result);
}
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
if(this.hijack(message)) {
return true;
}
return super.onJsConfirm(view, url, message, result);
}
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
String message = consoleMessage.message();
if(this.hijack(message)) {
return true;
}
return super.onConsoleMessage(consoleMessage);
}
@Override
public void onConsoleMessage(String message, int lineNumber, String sourceID) {
if(this.hijack(message)) {
return true;
}
super.onConsoleMessage(message, lineNumber, sourceID); WebView = (WebView) findViewById(r.i.webView); webview.loadUrl('http://imnerd.org');
webview.setWebChromeClient(new hijackChromeClient);
Copy the code
Here for the sake of convenience, all callback methods are written in full, in fact, in the actual use of the process is generally agreed on a good way to call. In addition, there are two types of console.log callback. The method with three parameters is the old version and has been discarded in the new API. It is recommended to use the ConsoleMessage object to pass parameters.
instructions
Basically, the basic way of interaction is the above several, but someone encapsulated the communication mechanism, forming a set of perfect WebviewJSBridge scheme, providing a client tuning front end, front end call client system solution. For example lzyzsd/JsBridge: https://github.com/lzyzsd/JsBridge project, we can see from the code, it on the ground floor is to use the URL hijacking method with JS to interact.
In addition, the shop is open source a small program running framework Hera: https://github.com/weidian-inc/hera, use addJavascriptInterface way of interaction.
Web App Project Cordova-Android: https://github.com/apache/cordova-android, It uses addJavascriptInterface (Android Webview API) and JS Prompt to call Native API.
https://github.com/wendux/DSBridge-Android