2022年4月6日 星期三

Android WebView「原生程式(Java)呼叫執行網頁JavaScipt」、「網頁JavaScipt呼叫執行原生程式(Java)」

Android 原生程式(Java)和 WebView 網頁中的 JavaScript 互相呼叫溝通。

  • 原生程式(Java)呼叫執行網頁JavaScipt
    例如，想在 APP onResume 時，執行網頁 JS 的 testJava2JS()函式。

    方法1： 使用 WebView.loadUrl() 執行網頁的JS
    [網頁的JS]
    <script>
function testJava2JS(aa) {
    alert(aa);
}
</script>
    [Java程式碼]
    @Override
protected void onResume() {
    super.onResume();
    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.loadUrl("javascript:testJava2JS('Java呼叫JS測試1')");
}


    方法2：使用 WebView.evaluateJavascript() 執行網頁的JS，此方式有個onReceiveValue()方法可處理JS返回的值
    [網頁的JS]
    <script>
function testJava2JS(aa) {
    alert(aa);
    return "testJava2JS 接收到:" + aa;
}
</script>
    [Java程式碼]
    @Override
protected void onResume() {
    super.onResume();
    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.evaluateJavascript("testJava2JS('Java呼叫JS測試2')",
            new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String v) {
                    Log.i("觀察 js return", v);
                }
            });
}

  • 網頁JavaScipt呼叫執行原生程式(Java)
    例如，Java中有個 class JS2Java，裡面有兩個要給JavaScipt呼叫的方法 testToast1()、testToast2()

    [Java程式碼]
    public class MainActivity extends AppCompatActivity {

    WebView webview;
    WebSettings webSettings;

    //新增一個類別，裡面有給testToast1()、testToast2()兩個方法給JavaScript呼叫用
    public class JS2Java {
        Context mContext;

        JS2Java(Context c) {
            mContext = c;
        }

        @JavascriptInterface
        public void testToast1(String msg) {
            Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void testToast2() {
            Toast.makeText(mContext, "測試testToast2", Toast.LENGTH_SHORT).show();
        }

    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webview = (WebView) findViewById(R.id.webview);
        webSettings = webview.getSettings();
        .....
        webSettings.setJavaScriptEnabled(true);//開啟JS
        ......
        //新增給JavaScript呼叫用的類別實例，並綁定一個名稱(例如：appJava)(在JavaScript呼叫時使用的名稱)
        webview.addJavascriptInterface(new JS2Java(this), "appJava");
        ......

        webview.loadUrl("file:///android_asset/index.html");
    }

}
    [網頁的JS]
    <script>
appJava.testToast1('測試testToast1...');
appJava.testToast2();
</script>



參考：


張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)