“This is the 21st day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Android WebView interacts with web data

Before there was no cross-platform framework, webViews were used to nest web pages for compatibility purposes, and the same effect can be achieved between Android and IOS. How does android WebView interact with web pages?

JS calls the Android method

  • The principle of

JS calls Android, using JNI, presumably meaning that the registered listening method, through some classes into Javascript statements, loaded by WebView.

  • implementation

The overall code is relatively simple, notice the correspondence

MainActivity

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView mWebView =findViewById(R.id.webView); WebSettings webSettings = mWebView.getSettings(); / / open the switch, set permissions with Js interaction webSettings. SetJavaScriptEnabled (true); mWebView.addJavascriptInterface(new JSBridge(),"bridge"); / / load the JS code mWebView. LoadUrl (" http://192.168.2.52:3001/test.html "); } public class JSBridge {// @javascriptInterface must add @javascriptInterface public void print(String MSG) { System.out.println("JS calls Android's print method "); }}}Copy the code

LoadUrl can be a file under the Asset folder in your project or an HTTP address. Annotations must be added in JSBridge to identify local listening methods.

 <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
Copy the code

HTML

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <script> function callAndroid(){ Bridge. print("js calls the android print method "); </script> </head> <body> <button type="button" id="button1" onclick="callAndroid()">Copy the code

Bridge. print is already defined in the native method.

Android calls the JS method

  • The principle of

Because JS is very flexible, using the idea of JS dynamic injection, android can call JS methods. Just like in the browser console, when you write JS, it can also change or call things on a web page.

  • implementation
public class MainActivity2 extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); WebView mWebView =findViewById(R.id.webView); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); / / set with Js interaction permissions webSettings. SetJavaScriptCanOpenWindowsAutomatically (true); / / setting allows JS pop-up mWebView. LoadUrl (" http://192.168.2.52:3001/test2.html "); Button button = findViewById(R.id.button); Button. SetOnClickListener (new View. An OnClickListener () {@ Override public void onClick (View v) {/ / by sending message Handler Mwebview.post (new Runnable() {@override public void run() {// Call javascript callJS() mWebView.loadUrl("javascript:callJS()"); }}); }}); mWebView.setWebChromeClient(new WebChromeClient()); }}Copy the code

MWebView setWebChromeClient is in order to make the front Windows pop up smoothly.

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity2"> <Button android:id="@+id/button" Android :layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" test "/> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>Copy the code

HTML

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Carson_Ho</title> <script> function callJS(){ Alert ("Android calls the JS callJS method "); } </script> </head> </html>Copy the code

CallJS is the method that Android calls.