webview 与 JS 交互

Android与JS通过WebView互相调用方法，实际上是：

一 Android去调用JS的代码

通过WebView的loadUrl（）
通过WebView的evaluateJavascript（）

二 JS去调用Android的代码

通过WebView的addJavascriptInterface（）进行对象映射
通过 WebViewClient 的shouldOverrideUrlLoading()方法回调拦截 url
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（）消息

Android去调用JS的代码

方式1：通过WebView的loadUrl（）

在js 中声明方法

// JS代码
<script>
        // Android需要调用的方法
       function callJS(){
          alert("Android调用了JS的callJS方法");
       }
</script>

在android 中调用

// 注意调用的JS方法名要对应上
// 调用javascript的callJS()方法

mWebView.loadUrl("javascript:callJS()");

特别注意：
JS代码调用一定要在 onPageFinished（）回调之后才能调用，否则不会调用。

onPageFinished()属于WebViewClient类的方法，主要在页面加载结束时调用

方式2：通过WebView的evaluateJavascript（）

Android 4.4 后才可使用

在js 中声明方法

// JS代码
<script>
        // Android需要调用的方法
       function callJS(){
          alert("Android调用了JS的callJS方法");
       }
</script>

在android 中调用

// 只需要将第一种方法的loadUrl()换成下面该方法即可
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

对比

调用方式	优点	缺点	使用场景
loadUrl()	方法简介	效率低获取返回值麻烦	不需要返回值，对性能要求低时
evaluateJavascript()	效率高	兼容性差 android 4.4以上可用	android4.4+

可用混合使用

// Android版本变量
final int version = Build.VERSION.SDK_INT;
// 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
if (version < 18) {
    mWebView.loadUrl("javascript:callJS()");
} else {
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

JS通过WebView调用 Android 代码

方式1：通过 WebView的addJavascriptInterface（）进行对象映射

定义一个与JS对象映射关系的Android类：AndroidtoJs

// 继承自Object类
public class AndroidtoJs extends Object {

    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS调用了Android的hello方法");
    }
}

在Android里通过WebView设置Android类与JS代码的映射


mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);

// 通过addJavascriptInterface()将Java对象映射到JS对象
//参数1：Javascript对象名
//参数2：Java对象名
mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象

// 加载JS代码
    
mWebView.loadUrl("");

html 中设置调用

<script>

     function callAndroid(){
        // 由于对象映射，所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }
</script>


<body>
      //点击按钮则调用callAndroid函数
      <button type="button" id="button1" onclick="callAndroid()"></button>
   
</body>

方式2：通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url

在JS约定所需要的Url协议

<script>
         function callAndroid(){
            /*约定的url协议为：js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         }
</script>

<!-- 点击按钮则调用callAndroid（）方法  -->
   <body>
     <button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
   </body>

在android shou通过WebViewClient复写shouldOverrideUrlLoading （）

在android shouldOverrideUrlLoading 中可以监听到加载的url

匹配参数

webview 与 JS 交互

webview 与 JS 交互

Android去调用JS的代码

方式1：通过WebView的loadUrl（）

方式2：通过WebView的evaluateJavascript（）

对比

JS通过WebView调用 Android 代码

方式1：通过 WebView的addJavascriptInterface（）进行对象映射

方式2：通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url

方式3：通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

方式3：通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（）消息