H5 Web网页通过JS（JavaScript）脚本调用Android本地原生方法函数

矫情吗；* 2024-02-19 15:31 12阅读 0赞

## H5 Web网页通过JS（JavaScript）脚本调用Android本地原生方法函数 ##

假设现在Android原生代码中有一个本地函数：androidNativeSayHello()，打算提供给外部H5页面使用。  
第一步，在Android原生代码中准备好提供给H5网页调用的本地原生函数：

import android.content.Context;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.webkit.JavascriptInterface;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    
    public class MainActivity extends AppCompatActivity {
    
        private WebView mWebView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mWebView = findViewById(R.id.webview);
    
            mWebView.loadUrl("file:///android_asset/web.html");
    
            WebSettings mWebSettings = mWebView.getSettings();
    
            //启用JavaScript。
            mWebSettings.setJavaScriptEnabled(true);
            mWebSettings.setUseWideViewPort(true);
    
            mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    
            mWebView.addJavascriptInterface(new MyJavaScriptInterface(this), "MyJSInterface");
        }
    
        private class MyJavaScriptInterface {
            private Context mContext;
    
            public MyJavaScriptInterface(Context context) {
                mContext = context;
            }
    
            //添加JS注解@JavascriptInterface。该Android原生的本地方法，供H5 Web网页调用。
            //该函数的访问属性必须是public。
            @JavascriptInterface
            public void androidNativeSayHello() {
                System.out.println("android native say 'hello , world !'");
            }
        }
    }

注意此时在给WebView增加JS接口时候（addJavascriptInterface），定义的名字‘MyJSInterface’，该名字‘MyJSInterface’是H5 Web网页中的JS代码调用的‘句柄’。

第二步，直接在H5的JS中调用。  
根据在Android原生代码中定义的句柄‘MyJSInterface’’直接调用Android原生的本地函数：

<html>
    <body>
    
    <script>
    function showMsg()
    {
        MyJSInterface.androidNativeSayHello();
    }
    
    </script>
    
    <form>
        <input type="button"
               value="H5 Web网页调用Android原生本地方法"
               onclick="showMsg()"/>
    </form>
    
    </body>
    </html>