Android and H5 interaction-Basic article

Hybrid app development is nothing new, and the interaction between native and H5 is essential. How does Android interact with H5? 1. WebView Loading page

We all know that the HTML page is loaded via WebView in Android, and it differs depending on where the HTML file is located:

//例如：加载assets文件夹下的test.html页面mWebView.loadUrl("file:///android_asset/test.html")//例如：加载网页mWebView.loadUrl("http://www.baidu.com")

If you just call Mwebview.loadurl () to load, then when you click on the link in the page, the page will open on your phone's default browser. If you want the page to open in the app, then you have to set the setwebviewclient:

mWebView.setWebViewClient(new WebViewClient() {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {                mWebView.loadUrl(url);                return true;            }        }    });

2. Android Native call JavaScript method in HTML page via Java

If you want to invoke the JS method then you have to let WebView support

    WebSettings webSettings = mWebView.getSettings();    //设置为可调用js方法    webSettings.setJavaScriptEnabled(true);

If the calling JS method does not return a value, it can call Mwebview.loadurl ("Javascript:do ()") directly, where do is the method in JS, and if there is a return value we can call Mwebview.evaluatejavascript () Method:

 mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {        @Override        public void onReceiveValue(String value) {            Log.e(TAG, "onReceiveValue value=" + value);        }    });

The JS code is as follows:

<script type="text/javascript">    function sum(a,b){    return a+b;    }    function do(){    document.getElementById("p").innerHTML="hello world";    }</script>

2. js call Android Native Java method

Above Android4.2 can be declared directly using @javascriptinterface annotations, the following is a local Java method

 public class JsInteration {    @JavascriptInterface    public String back() {        return "hello world";    }}

After you define this method, call the Mwebview.addjavascriptinterface () method:

 mWebView.addJavascriptInterface(new JsInteration(), "android");

So how to invoke in JS?

<script type="text/javascript">     function s(){     //调用Java的back()方法    var result =window.android.back();    document.getElementById("p").innerHTML=result;    }</script>

4. Block Click events in HTML pages

mWebView.setWebViewClient(new WebViewClient() {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            //判断url拦截事件            if (url.equals("file:///android_asset/test2.html")) {                Log.e(TAG, "shouldOverrideUrlLoading: " + url);                startActivity(new Intent(MainActivity.this,Main2Activity.class));                return true;            } else {                mWebView.loadUrl(url);                return false;            }        }    });

The above is the Java Call JS method and JS Call Java method Implementation of one of the interactive way. The complete code is given below: mainactivity

public class Mainactivity extends appcompatactivity {public static final String TAG = "mainactivity";p rivate WebView MWEBV    iew; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);    Setcontentview (R.layout.activity_main);    Mwebview = (WebView) Findviewbyid (R.id.webview);    Mwebview.loadurl ("file:///android_asset/test.html");    WebSettings websettings = Mwebview.getsettings ();    Websettings.setjavascriptenabled (TRUE);    Mwebview.addjavascriptinterface (New Jsinteration (), "Android"); Mwebview.setwebviewclient (New Webviewclient () {@Override public boolean shouldoverrideurlloading (WebView VI ew, String URL) {if (Url.equals ("file:///android_asset/test2.html")) {LOG.E (TAG, "Shouldoverri                deurlloading: "+ url");                StartActivity (New Intent (Mainactivity.this,main2activity.class));            return true;                } else {mwebview.loadurl (URL); Return False }        }    });} The Android call has a return value of JS method @targetapi (build.version_codes.        KITKAT) public void OnClick (View v) {mwebview.evaluatejavascript ("sum", new valuecallback<string> () {        @Override public void Onreceivevalue (String value) {LOG.E (TAG, "Onreceivevalue value=" + value); }    });}    public class Jsinteration {@JavascriptInterface public String back () {return ' Hello World '; }}}

Test.html

<!DOCTYPE html>

Youjz
Links: http://www.jianshu.com/p/a25907862523
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Android and H5 interaction-Basic article