Android webview 混合开发 HTML(JS)与Java 的交互

1. 在WebView启用javascript

// 在WebView启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);

2. 编写JS调用JAVA函数的接口类

  /**
     * 用于对接JS的接口类
     */
    class JSToJAVA {

        @JavascriptInterface
        public void startFunction() {
            Toast.makeText(JSJAVAActivity.this, "js调用了java函数", Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java函数");
                }
            });
        }

        @JavascriptInterface
        public void startFunctionWithParam(final String str) {
            Toast.makeText(JSJAVAActivity.this, str, Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java函数传递参数:" + str);
                }
            });
        }
    }

注意每个函数上需要添加@JavascriptInterface 注解,用于标识js可以调用的函数

3. 在webview中添加调用Java方法的接口

        //在webview中添加调用Java方法的接口
        mWebView.addJavascriptInterface(new JSToJAVA(), "javatojs");

注意函数的第二值"javatojs",这个在后面HTML中调用Java方法需要用到。

4. Java 调用JS的函数

Java 调用的方法是:mWebView.loadUrl(String url),url参数需要以javascript:开头,后面跟js中函数名称
javascript:+函数名()

Button button = (Button) findViewById(R.id.button);
Button button2 = (Button) findViewById(R.id.button2);
button.setOnClickListener(btnClickListener);
button2.setOnClickListener(btnClickListener);
View.OnClickListener btnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.button:
                    // 无参数调用
                    mWebView.loadUrl("javascript:javacalljs()");
                    break;
                case R.id.button2:
                    // 传递参数调用
                    mWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
                    break;
                default:
                    break;
            }
        }
    };

对应JS中的函数方法是:

  

5. JS调用Java 函数:

调用方式:window.接口定义参数.java中函数名(),这个接口对应参数是第3步函数中的"javatojs"




以下是本文全部代码:

activty 代码:JSJAVAActivity

package com.marlon.leaflet;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class JSJAVAActivity extends AppCompatActivity {
    private WebView mWebView = null;
    private TextView msgView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jsjavaactivity);
        mWebView = (WebView) findViewById(R.id.webview);
        msgView = (TextView) findViewById(R.id.msg);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 加载assets目录下面的html
        mWebView.loadUrl("file:///android_asset/test.html");

        Button button = (Button) findViewById(R.id.button);
        Button button2 = (Button) findViewById(R.id.button2);
        button.setOnClickListener(btnClickListener);
        button2.setOnClickListener(btnClickListener);
        //添加js调用Java方法的接口,注意第二个参数,这里要和js代码对应
        mWebView.addJavascriptInterface(new JSToJAVA(), "javatojs");
    }

    View.OnClickListener btnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.button:
                    // 无参数调用
                    mWebView.loadUrl("javascript:javacalljs()");
                    break;
                case R.id.button2:
                    // 传递参数调用
                    mWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
                    break;
                default:
                    break;
            }
        }
    };

    /**
     * 用于对接JS
     */
    class JSToJAVA {

        @JavascriptInterface
        public void startFunction() {
            Toast.makeText(JSJAVAActivity.this, "js调用了java函数", Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java函数");

                }
            });
        }

        @JavascriptInterface
        public void startFunctionWithParam(final String str) {
            Toast.makeText(JSJAVAActivity.this, str, Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java函数传递参数:" + str);

                }
            });
        }
    }
}

布局文件:activity_jsjavaactivity.xml




    

    

        
    

    

HTML :test.html



    
    


这是WebView中HTML的类容


HTML内容显示:

附加一个webview WebSettings 说明

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true); -> 是否开启JS支持
webSettings.setPluginsEnabled(true); -> 是否开启插件支持
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); -> 是否允许JS打开新窗口

webSettings.setUseWideViewPort(true); -> 缩放至屏幕大小
webSettings.setLoadWithOverviewMode(true); -> 缩放至屏幕大小
webSettings.setSupportZoom(true); -> 是否支持缩放
webSettings.setBuiltInZoomControls(true); -> 是否支持缩放变焦,前提是支持缩放
webSettings.setDisplayZoomControls(false); -> 是否隐藏缩放控件

webSettings.setAllowFileAccess(true); -> 是否允许访问文件
webSettings.setDomStorageEnabled(true); -> 是否节点缓存
webSettings.setDatabaseEnabled(true); -> 是否数据缓存
webSettings.setAppCacheEnabled(true); -> 是否应用缓存
webSettings.setAppCachePath(uri); -> 设置缓存路径

webSettings.setMediaPlaybackRequiresUserGesture(false); -> 是否要手势触发媒体
webSettings.setStandardFontFamily("sans-serif"); -> 设置字体库格式
webSettings.setFixedFontFamily("monospace"); -> 设置字体库格式
webSettings.setSansSerifFontFamily("sans-serif"); -> 设置字体库格式
webSettings.setSerifFontFamily("sans-serif"); -> 设置字体库格式
webSettings.setCursiveFontFamily("cursive"); -> 设置字体库格式
webSettings.setFantasyFontFamily("fantasy"); -> 设置字体库格式
webSettings.setTextZoom(100); -> 设置文本缩放的百分比
webSettings.setMinimumFontSize(8); -> 设置文本字体的最小值(1~72)
webSettings.setDefaultFontSize(16); -> 设置文本字体默认的大小

webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); -> 按规则重新布局
webSettings.setLoadsImagesAutomatically(false); -> 是否自动加载图片
webSettings.setDefaultTextEncodingName("UTF-8"); -> 设置编码格式
webSettings.setNeedInitialFocus(true); -> 是否需要获取焦点
webSettings.setGeolocationEnabled(false); -> 设置开启定位功能
webSettings.setBlockNetworkLoads(false); -> 是否从网络获取资源

你可能感兴趣的:(Android webview 混合开发 HTML(JS)与Java 的交互)