WebView入门(一)——Android与js的简单相互调用

最新推荐文章于 2023-10-30 12:28:42 发布

樱花雨2377

最新推荐文章于 2023-10-30 12:28:42 发布

阅读量334

点赞数

分类专栏： WebView 文章标签： js android webview

本文链接：https://blog.csdn.net/qq_31573123/article/details/87278850

版权

WebView 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Android与js的简单相互调用

一、js调用Android（点击H5页面的“js调用java”按钮）

方法：通过@JavascriptInterface注解调用

步骤1：将需要调用的js代码以.html的格式放入assets文件夹下

<html>
<script type="text/javascript">
    function callNative() {
        window.bridge.helloNative("js调用Java成功!");
    }
</script>
<button onclick="javascript:callNative();">js调用java</button>
</html>

步骤2：在Android中载入js代码

@SuppressLint({"SetJavaScriptEnabled","JavascriptInterface","addJavascriptInterface"})
    private void showSimpleWebView() {
        WebSettings webSettings = mSimpleWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);  // 设置与js交互的权限
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);  // 设置允许JS弹窗

        //JsInterface为管理native与js交互的类，bridge为js调用native时的别名
        mSimpleWebView.addJavascriptInterface(new JsInterface(), "bridge");
        mSimpleWebView.loadUrl("file:///android_asset/test1.html");  // 载入js代码
    }

步骤3：通过@JavascriptInterface注解调用java方法

 /**
     * js调用java
     */
    public class JsInterface {
        @JavascriptInterface  // 必须使用此注解
        public void helloNative(String str) { // 定义js需要调用的方法
            Toast.makeText(getApplicationContext(), str, Toast.LENGTH_LONG).show();
        }
    }

注意事项：

JsInterface为管理native与js交互的类，bridge为js调用native时的别名，helloNative是需要调用的方法名，与js中的window.bridge.helloNative对应。

二、Android调用js（点击Android原生页面的“java调用js”按钮）

方法一：通过loadUrl()方法调用

方法二：通过evaluateJavascript()方法实现

1、loadUrl()获取返回值麻烦,每次调用都会将页面刷新；

2、evaluateJavascript()可以直接获取返回值，但只能在4.4以上使用，调用不会刷新页面。

步骤1：js部分代码,实现callJs方法，弹出提示框

function callJs(parameter) {
        alert(parameter + "java调用js成功!");
    }

步骤2：Android调用js中的callJs带参方法

/**
     * java调用js
     */
    public void callJs() {
        mCallJsButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final String result = "传递的参数，";
                final String parameter = "'传递的参数，'";

                mSimpleWebView.post(new Runnable() {  // 必须在UI线程执行
                    @Override
                    public void run() {
                        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
                            mSimpleWebView.loadUrl("javascript:callJs(" + parameter + ")");  // 4.4以下版本使用loadUrl
                        } else {
                            // 4.4及以上版本使用evaluateJavascript
                            mSimpleWebView.evaluateJavascript(String.format(getString(R.string.java_call_js), result),  // 两种string写法均可
                                    new ValueCallback<String>() {
                                @Override
                                public void onReceiveValue(String value) {
                                    // js返回的结果
                                }
                            });
                        }
                    }
                });
            }
        });
    }

注意事项：

1、R.string.java_call_js的内容为 <string name="java_call_js">javascript:callJs(\"%1$s\");</string>；

2、loadUrl()与evaluateJavascript()中的两个字符串中的写法均可；

3、两个方法都必须在UI线程执行。

步骤3：响应js的Alert事件，绘制dialog

mSimpleWebView.setWebChromeClient(new WebChromeClient() {
            // 响应js的Alert函数
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                AlertDialog.Builder dialog = new AlertDialog.Builder(SimpleWebViewActivity.this);
                dialog.setTitle("Alert");
                dialog.setMessage(message);
                dialog.create().show();
                result.cancel();  // 一定要调用cancel()或confirm()，不然onJsAlert只会调用一次
                return true;
            }
        });

有时会出现响应弹出dialog后页面点击无反应，就是因为没有调用result.cancel()或者result.confirm()方法。

步骤4：响应js的下载事件，可打开系统内置浏览器下载apk

 mSimpleWebView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
                Intent intent = new Intent(Intent.ACTION_VIEW);
                intent.addCategory(Intent.CATEGORY_BROWSABLE);
                intent.setData(Uri.parse(url));
                startActivity(intent);
            }
        });

H5部分：

<a href="http://download.xxx.com/xxx.apk">下载图片</a>

三、完整代码

1、H5部分：

<html>
<script type="text/javascript">
    function callNative() {
        window.bridge.helloNative("js调用Java成功!");
    }

    function callJs(parameter) {
        alert(parameter + "java调用js成功!");
    }
</script>
<a href="http://download.xxx.com/xxx.apk">下载图片</a>
<button onclick="javascript:callNative();">js调用java</button>
</html>

2、Android部分：

public class SimpleWebViewActivity extends AppCompatActivity {

    private WebView mSimpleWebView = null;
    private Button mCallJsButton = null;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple_webview);

        mSimpleWebView = (WebView) findViewById(R.id.simple_webview);
        mCallJsButton = (Button) findViewById(R.id.button_java_call_js);
        showSimpleWebView();
    }

    @SuppressLint({"SetJavaScriptEnabled","JavascriptInterface","addJavascriptInterface"})
    private void showSimpleWebView() {
        WebSettings webSettings = mSimpleWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);  // 设置与js交互的权限
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);  // 设置允许JS弹窗

        //JsInterface为管理native与js交互的类，bridge为js调用native时的别名
        mSimpleWebView.addJavascriptInterface(new JsInterface(), "bridge");
        mSimpleWebView.loadUrl("file:///android_asset/test1.html");  // 载入js代码

        callJs();

        mSimpleWebView.setWebChromeClient(new WebChromeClient() {
            // 响应js的Alert函数
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                AlertDialog.Builder dialog = new AlertDialog.Builder(SimpleWebViewActivity.this);
                dialog.setTitle("Alert");
                dialog.setMessage(message);
                dialog.create().show();
                result.cancel();  // 一定要调用cancel()或confirm()，不然onJsAlert只会调用一次
                return true;
            }
        });
        mSimpleWebView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
                Intent intent = new Intent(Intent.ACTION_VIEW);
                intent.addCategory(Intent.CATEGORY_BROWSABLE);
                intent.setData(Uri.parse(url));
                startActivity(intent);
            }
        });
    }

    /**
     * js调用java
     */
    public class JsInterface {
        @JavascriptInterface  // 必须使用此注解
        public void helloNative(String str) { // 定义js需要调用的方法
            Toast.makeText(getApplicationContext(), str, Toast.LENGTH_LONG).show();
        }
    }

    /**
     * java调用js
     */
    public void callJs() {
        mCallJsButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final String result = "传递的参数，";
                final String parameter = "'传递的参数，'";

                mSimpleWebView.post(new Runnable() {  // 必须在UI线程执行
                    @Override
                    public void run() {
                        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
                            mSimpleWebView.loadUrl("javascript:callJs(" + parameter + ")");  // 4.4以下版本使用loadUrl
                        } else {
                            // 4.4及以上版本使用evaluateJavascript
                            mSimpleWebView.evaluateJavascript(String.format(getString(R.string.java_call_js), result),  // 两种string写法均可
                                    new ValueCallback<String>() {
                                @Override
                                public void onReceiveValue(String value) {
                                    // js返回的结果
                                }
                            });
                        }
                    }
                });
            }
        });
    }
}

完整代码下载地址：https://download.csdn.net/download/qq_31573123/10957505

樱花雨2377

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WebView入门(一)——Android与js的简单相互调用

Android与js的简单相互调用一、js调用Android（点击H5页面的“js调用java”按钮）方法：通过@JavascriptInterface注解调用步骤1：将需要调用的js代码以.html的格式放入assets文件夹下<html><script type="text/javascript"> function callNativ...
复制链接

扫一扫