Android WebView:我是怎么和 JavaScript 互撩的?

2,826 阅读3分钟
原文链接: motalks.cn

在上篇 各种 JsBridge 调用效率的对比 中已经总结出我们应该用什么方式进行WebView 与 JavaScript 的交互了,这篇我们就正式的进入主题,一步步实现完整的 WebView 与 JavaScript 的交互。

Demo动图演示

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

此处输入图片的描述

怎么生成我们需要的 HTML 页面?

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

w3school 是什么?

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

我们需要的 HTML 页面

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

我们要实现的5个功能

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

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="我加了点料";

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;

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;
        }
    });

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;
        }
    });

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

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) {
            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 代码:

package cn.mtalks.jsbridgedemo;
import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

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() {
    
    mWebView.getSettings().setJavaScriptEnabled(true);
    
    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();
            }
            
            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());
    }
}

XML 代码






    

    

    





友情提示

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

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

下篇预告

Webview 页面展示优化。除了 HTML 页面自己的优化,在 Android Native 端能为加载速度做些什么优化么?下篇文章会给你答案,比如公共 Js 方法提取放入本地,JS,CSS,图片资源预加载等等。