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>

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

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

猜你喜欢