Android WebView 和 javaScript的互相调用(三)

深藏阁楼爱情的钟 2022-07-16 05:23 148阅读 0赞

原文出处：[http://motalks.cn/2016/08/27/Android-WebView-JavaScript-2/][http_motalks.cn_2016_08_27_Android-WebView-JavaScript-2]

## **WebView相关阅读** ##

*  [Android WebView 和 javaScript的互相调用(一)][Android WebView _ javaScript]
 *  [Android WebView 和 javaScript的互相调用(二)][Android WebView _ javaScript 1]
 *  [Android WebView 和 javaScript的互相调用(三)][Android WebView _ javaScript 2]
 *  [Android WebView与js交互通信][Android WebView_js]
 *  [Android 4.4 中 WebView 使用注意事项][Android 4.4 _ WebView]
 *  [Android WebView开发问题汇总][Android WebView]
 *  [Android WebView 性能优化][Android WebView 1]

## **一、Demo动图演示** ##

动图镇楼，演示功能点的顺序是：5-1-2-3-4

![这里写图片描述][jsDemo.gif]

## **二、怎么生成我们需要的 HTML 页面？** ##

当我们get了WebView 和 JavaScript交互的技能时，准备跃跃欲试的时候，就会对这个被这个问题搞懵逼了，他娘的我又不是前端，要我立马写个自己想要的HTML页面臣妾真的办不到啊。

## **[三、w3school][w3school]是什么？** ##

是什么？你咋不点进去看看呢？

## **四、我们需要的 HTML 页面** ##

按照w3school的简单教程我们就可以拼凑出我们所需要的页面了，如下图。

![HTML 页面][HTML]

## **五、我们要实现的5个功能** ##

*  Android Native 端调用 HTML 中的 javascript 脚本
 *  Android Native 端调用 HTML 中的 javascript 脚本并传递参数
 *  HTML 中的 javascript 脚本调用 Android Native 端的函数
 *  HTML 中的 javascript 脚本调用Android Native 端的函数并传递参数
 *  HTML 中的 javascript 脚本与 Android Native端的 Java 代码完整交互流程

### **1、Android Native 端调用 HTML 中的 js 脚本** ###

该例子中Android Native 端的 java 代码会直接调用 HTML 页面中的js 脚本，实现更改 HTML 页面 subtitle 的功能。

Android Native 端的代码为：

mCallJsBtn.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               mCallJsWithArgsBtn.setText("Native调用WebView的有参JS脚本");
               mWebView.loadUrl("javascript:changeDemoSubtitle()");
           }
       });

HTML 对应的 js 方法是：

function changeDemoSubtitle(){
    document.getElementById("subtitle").innerHTML="我加了点料";
    }

### **2、Android Native 端调用 HTML 中的 js 脚本并传递参数** ###

Android Native 端的代码为：

mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mCallJsWithArgsBtn.setText("参数为：" + showDevInfo());
                showDevInfoToH5();
            }
        });
        private String showDevInfo() {
        return "showDevInfo('手机型号:" + android.os.Build.MODEL +
                ",SDK版本:" + android.os.Build.VERSION.SDK +
                ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
    }
    
    private void showDevInfoToH5() {
        mWebView.loadUrl("javascript:" + showDevInfo());
    }

HTML 对应的 js 方法是：

function showDevInfo(info){
    document.getElementById("subtitle").innerHTML=info;
    }

### **3、HTML 中的 javascript 脚本调用 Android Native 端的函数** ###

HTML 对应的 js 方法是：

function disp_confirm(){
        confirm();
    }

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
                }
                result.confirm();
                return true;
            }
        });

### **4、HTML 中的 javascript 脚本调用Android Native 端的函数并传递参数** ###

HTML 对应的 js 方法是：

function disp_confirm_with_args(message){
        confirm(message);
        }

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的参数message：" + message, Toast.LENGTH_SHORT).show();
                }
                result.confirm();
                return true;
            }
        });

### **5、HTML 中的 javascript 脚本与 Android Native端的 Java 代码完整交互流程** ###

HTML 对应的 js 方法是：

function disp_confirm_with_args(message){
        confirm(message);
        }
        <input type="button" onclick="disp_confirm_with_args('getDevInfo')" value="点击获取用户手机信息"/>

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                if ("getDevInfo".equals(message)) {
                    showDevInfoToH5();
                } 
                }
                result.confirm();
                return true;
            }
        });
        private String showDevInfo() {
        return "showDevInfo('手机型号:" + android.os.Build.MODEL +
                ",SDK版本:" + android.os.Build.VERSION.SDK +
                ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
    }
    
    private void showDevInfoToH5() {
        mWebView.loadUrl("javascript:" + showDevInfo());
    }

## **Android Native 端代码完整展示：** ##

Activity 代码：

public class MainActivity2 extends Activity { 
    
    private WebView mWebView;
    private Button mCallJsBtn;
    private Button mCallJsWithArgsBtn;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_2);
        initView();
        initWebView();
    }
    
    private void initView() {
        mWebView = (WebView) findViewById(R.id.webview);
        mCallJsBtn = (Button) findViewById(R.id.call_js_without_args_btn);
        mCallJsWithArgsBtn = (Button) findViewById(R.id.call_js_with_args_btn);
    
        mCallJsBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mCallJsWithArgsBtn.setText("Native调用WebView的有参JS脚本");
                mWebView.loadUrl("javascript:changeDemoSubtitle()");
            }
        });
    
        mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mCallJsWithArgsBtn.setText("参数为：" + showDevInfo());
                showDevInfoToH5();
            }
        });
    }
    
    private void initWebView() {
        //开启JavaScript功能
        mWebView.getSettings().setJavaScriptEnabled(true);
        //加载本地html
        mWebView.loadUrl("file:///android_asset/JsDemo.html");
    
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                if ("getDevInfo".equals(message)) {
                    showDevInfoToH5();
                } else if (TextUtils.isEmpty(message)) {
                    Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的参数message：" + message, Toast.LENGTH_SHORT).show();
                }
                //回调通知H5页面用户操作已完成，可以再次点击相关按钮
                result.confirm();
                //设为true，可以消耗掉H5页面的confirm弹窗。
                return true;
            }
        });
    }
    
    private String showDevInfo() {
        return "showDevInfo('手机型号:" + android.os.Build.MODEL +
                ",SDK版本:" + android.os.Build.VERSION.SDK +
                ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
    }
    
    private void showDevInfoToH5() {
            mWebView.loadUrl("javascript:" + showDevInfo());
        }
    }

XML 代码

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#000000" android:orientation="vertical">
    
        <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:paddingBottom="10dp" android:paddingTop="10dp" android:text="Android_Native" android:textColor="#FFFFFF" />
    
        <Button android:id="@+id/call_js_without_args_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="Native调用WebView的JS脚本" />
    
        <Button android:id="@+id/call_js_with_args_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:paddingBottom="10dp" android:paddingTop="10dp" android:text="Native调用WebView的有参JS脚本" />
    </LinearLayout>
    
    <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF" />
    </LinearLayout>

AndroidManifest 文件

<?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="cn.mtalks.jsbridgedemo">
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.READ_PHONE_STATE" />
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            <activity
                android:name=".MainActivity2"
                android:label="@string/app_name">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
    
            </activity>
        </application>
    </manifest>

## **友情提示** ##

其实在JavaScript调用 Java本地方法，谷歌官方的实现方法应该是使用 JavascriptInterface 方式。但是该方式在 Android4.2版本之前存在安全漏洞，感兴趣的看这里。在Android4.2版本之后加入了@JavascriptInterface注解才得以解决，考虑到目前 Android 版本碎片化太严重，使用JavascriptInterface并不适合，这也是上篇文章没把它放入效率对比的原因。

以上就是一个完整的 WebView 与 JavaScript 的交互例子。大家可以自己动手试试上篇文章介绍的ShouldInterceptRequest方式来实现这个例子。

[http_motalks.cn_2016_08_27_Android-WebView-JavaScript-2]: http://motalks.cn/2016/08/27/Android-WebView-JavaScript-2/
[Android WebView _ javaScript]: http://blog.csdn.net/axi295309066/article/details/52739923?locationNum=4
[Android WebView _ javaScript 1]: http://blog.csdn.net/axi295309066/article/details/52739957?locationNum=7
[Android WebView _ javaScript 2]: http://blog.csdn.net/axi295309066/article/details/52750966?locationNum=6
[Android WebView_js]: http://blog.csdn.net/axi295309066/article/details/52260801?locationNum=1
[Android 4.4 _ WebView]: http://blog.csdn.net/axi295309066/article/details/52260855?locationNum=2
[Android WebView]: http://blog.csdn.net/axi295309066/article/details/52260767?locationNum=3
[Android WebView 1]: http://blog.csdn.net/axi295309066/article/details/52751133?locationNum=5
[jsDemo.gif]: http://7xnk0a.com1.z0.glb.clouddn.com/jsDemo.gif
[w3school]: http://www.w3school.com.cn/b.asp
[HTML]: http://7xnk0a.com1.z0.glb.clouddn.com/jsDemo_html.png