WebView与JavaScript交互

来源：互联网发布：中兴联通网络机顶盒编辑：程序博客网时间：2024/05/20 21:56

随着Html5的崛起，越来越多的App开始引入网页，如现在比较火热的React Native、Cordova等框架，难免我们的项目中会遇到WebView和JavaScript的交互。

首先我们来配置下我们WebView

webview = (WebView) findViewById(R.id.webview);        webview.loadUrl("file:///android_asset/testjs.html");        findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);        findViewById(R.id.btn_call_js_params).setOnClickListener(this);        settings = webview.getSettings();        settings.setJavaScriptEnabled(true);        settings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗        webview.setWebChromeClient(new WebChromeClient());        webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法

1.Android调用JavaScript无参方法

js方法

 function sendMsg(){       return "Android调用了Js无参函数";    }

Android调用js的sendMsg方法

 webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback<String>() {                    @Override                    public void onReceiveValue(String value) {                        if (value != null) {                            Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();                        }                    }                });

我们通过evaluateJavascript方法调用了JavaScript的sendMsg函数，并且会拿到一个回调字符串，这个字符串就是Js通过return给我们的字符串

很遗憾，这个方法必须在Android API 19以上的版本才可以使用，如果要兼容以下的版本，必须通过特殊的方法进行处理，不过今天我们就暂不兼容以下的版本，因为现在基本都是5.0以上的用户了。

2.Android调用JavaScript有参方法

js方法

function getAndroidValue(value){        alert(value);    }

Android方法

 String msg2Js = "Android传递了一个参数给Js";                webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback<String>() {                    @Override                    public void onReceiveValue(String value) {                    }                });

这里Android调用了Js的getAndroidValue方法，并且传递了一个字符串参数给它，让js弹窗。弹窗内容就是我们传递的参数

3.JavaScript调用Android无参方法

js代码

<button type="button" id="button1" onclick="callAndroidNoParams()">调用Android无参方法</button>

function callAndroidNoParams(){        JavaScriptObject.noParams();    }

Android这里开放了Js的接口

 webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法

我们在AndroidJS这个类里面

class AndroidJs extends Object {        @JavascriptInterface        public void noParams() {            Toast.makeText(MainActivity.this, "Js调用Android无参方法", Toast.LENGTH_SHORT).show();        }    }

4.JavaScript调用Android有参方法

Js代码

<button type="button" id="button2" onclick="callAndroidParams()">调用Android有参方法</button>

function callAndroidParams(){        JavaScriptObject.paramsToast("js调用Android有参方法");    }

Android暴露给Js的方法，获取他给的值，并且Toast出来

 @JavascriptInterface        public void paramsToast(String content){            if (content!=null){                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();            }        }

提示：

至于Android5.0以下的版本如果想获取Js的返回值，建议调用Js方法，然后让Js调我们的方法将值传递给我们

全部代码

testjs.html

<!doctype html><html lang="en" xmlns="http://www.w3.org/1999/html"><head>    <meta charset="UTF-8">    <meta name="Generator" content="EditPlus®">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>Android与JavaScript互调</title>    <script type="text/javascript">     function sendMsg(){       return "Android调用了Js无参函数";    }    function getAndroidValue(value){        alert(value);    }    function callAndroidNoParams(){        JavaScriptObject.noParams();    }    function callAndroidParams(){        JavaScriptObject.paramsToast("js调用Android有参方法");    }    </script></head><body>    Hello World!!!    <button type="button" id="button1" onclick="callAndroidNoParams()">调用Android无参方法</button>    </br>    <button type="button" id="button2" onclick="callAndroidParams()">调用Android有参方法</button></body></html>

Android代码

package com.wj.jsjavademo;import android.os.Build;import android.os.Bundle;import android.support.annotation.RequiresApi;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.ValueCallback;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.widget.Toast;@RequiresApi(api = Build.VERSION_CODES.KITKAT)public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private WebView webview;    private WebSettings settings;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initWebView();    }    private void initWebView() {        webview = (WebView) findViewById(R.id.webview);        webview.loadUrl("file:///android_asset/testjs.html");        findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);        findViewById(R.id.btn_call_js_params).setOnClickListener(this);        settings = webview.getSettings();        settings.setJavaScriptEnabled(true);        settings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗        webview.setWebChromeClient(new WebChromeClient());        webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.btn_call_js_no_params:                webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback<String>() {                    @Override                    public void onReceiveValue(String value) {                        if (value != null) {                            Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();                        }                    }                });                break;            case R.id.btn_call_js_params:                String msg2Js = "Android传递了一个参数给Js";                webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback<String>() {                    @Override                    public void onReceiveValue(String value) {                    }                });                break;        }    }    class AndroidJs extends Object {        @JavascriptInterface        public void noParams() {            Toast.makeText(MainActivity.this, "Js调用Android无参方法", Toast.LENGTH_SHORT).show();        }        @JavascriptInterface        public void paramsToast(String content){            if (content!=null){                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();            }        }    }}

阅读全文

0 0