Android：WebView与 JS 交互方式都在这里了

言

现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图

上述功能是由Android的WebView实现的，其中涉及到Android客户端与Web网页交互的实现
今天我将全面介绍Android通过WebView与JS交互的全面方式

阅读本文前请先阅读：Android开发：最全面、最易懂的Webview详解

1. 交互方式总结

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

Android去调用JS的代码
JS去调用Android的代码

二者沟通的桥梁是WebView

对于Android调用JS代码的方法有2种：

1. 通过WebView的loadUrl（）

2. 通过WebView的evaluateJavascript（）

对于JS调用Android代码的方法有3种：

1. 通过WebView的addJavascriptInterface（）进行对象映射

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

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

2. 具体分析

2.1 Android通过WebView调用 JS 代码

对于Android调用JS代码的方法有2种：

1. 通过WebView的loadUrl（）

2. 通过WebView的evaluateJavascript（）

方式1：通过WebView的loadUrl（）

实例介绍：点击Android按钮，即调用WebView JS（文本名为javascript）中callJS（）
具体使用：

步骤1：将需要调用的JS代码以.html格式放到src/main/assets文件夹里

为了方便展示，本文是采用Andorid调用本地JS代码说明；
实际情况时，Android更多的是调用远程JS代码，即将加载的JS代码路径改成url即可

需要加载JS代码：javascript.html

// 文本名：javascript

<!DOCTYPE html>

<html>

<head>

<title>Carson_Ho</title>

// JS代码

// Android需要调用的方法

function callJS(){

alert("Android调用了JS的callJS方法");

}

</script>

</head>

</html>

步骤2：在Android里通过WebView设置调用JS代码

Android代码：MainActivity.java

注释已经非常清楚

public class MainActivity extends AppCompatActivity {

WebView mWebView;

Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView =(WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限

webSettings.setJavaScriptEnabled(true);

// 设置允许JS弹窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 先载入JS代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

button = (Button) findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// 通过Handler发送消息

mWebView.post(new Runnable() {

@Override

public void run() {

// 注意调用的JS方法名要对应上

// 调用javascript的callJS()方法

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

}

});

}

});

// 由于设置了弹窗检验调用结果,所以需要支持js对话框

// webview只是载体，内容的渲染需要使用webviewChromClient类去实现

// 通过设置WebChromeClient对象处理JavaScript的对话框

//设置响应js 的Alert()函数

mWebView.setWebChromeClient(new WebChromeClient() {

@Override

public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {

AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);

b.setTitle("Alert");

b.setMessage(message);

b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

result.confirm();

}

});

b.setCancelable(false);

b.create().show();

return true;

}

});

}

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

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

方式2：通过WebView的evaluateJavascript（）

优点：该方法比第一种方法效率更高、使用更简洁。
因为该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。
Android 4.4 后才可使用
具体使用

// 只需要将第一种方法的loadUrl()换成下面该方法即可

mWebView.evaluateJavascript（"javascript：callJS()", new ValueCallback<String>() {

@Override

public void onReceiveValue(String value) {

//此处为 js 返回的结果

}

});

}

2.1.2 方法对比

2.1.3 使用建议

两种方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2

// 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 返回的结果

}

});

}

2.2 JS通过WebView调用 Android 代码

对于JS调用Android代码的方法有3种：

1. 通过WebView的addJavascriptInterface（）进行对象映射

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

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

2.2.1 方法分析

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

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

AndroidtoJs.java（注释已经非常清楚）

// 继承自Object类

public class AndroidtoJs extends Object {

// 定义JS需要调用的方法

// 被JS调用的方法必须加入@JavascriptInterface注解

@JavascriptInterface

public void hello(String msg) {

System.out.println("JS调用了Android的hello方法");

}

步骤2：将需要调用的JS代码以.html格式放到src/main/assets文件夹里

需要加载JS代码：javascript.html

<!DOCTYPE html>

<html>

<head>

<title>Carson</title>

function callAndroid(){

// 由于对象映射，所以调用test对象等于调用Android映射的对象

test.hello("js调用了android中的hello方法");

}

</script>

</head>

<body>

//点击按钮则调用callAndroid函数

</body>

</html>

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

详细请看注释

public class MainActivity extends AppCompatActivity {

WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

特点

优点：使用简单

仅将Android对象和JS对象映射即可

缺点：存在严重的漏洞问题，具体请看文章：你不知道的 Android WebView 使用漏洞

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

具体原理：

Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url
解析该 url 的协议
如果检测到是预先约定好的协议，就调用相应方法

即JS需要调用Android的方法

具体使用：
步骤1：在JS约定所需要的Url协议
JS代码：javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>

<html>

<head>

<title>Carson_Ho</title>

function callAndroid(){

/*约定的url协议为：js://webview?arg1=111&arg2=222*/

document.location = "js://webview?arg1=111&arg2=222";

}

</script>

</head>

<body>

<button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>

</body>

</html>

当该JS通过Android的mWebView.loadUrl("file:///android_asset/javascript.html")加载后，就会回调shouldOverrideUrlLoading （），接下来继续看步骤2：

步骤2：在Android通过WebViewClient复写shouldOverrideUrlLoading （）

MainActivity.java

public class MainActivity extends AppCompatActivity {

WebView mWebView;

// Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限

webSettings.setJavaScriptEnabled(true);

// 设置允许JS弹窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 步骤1：加载JS代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

// 复写WebViewClient类的shouldOverrideUrlLoading方法

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

// 步骤2：根据协议的参数，判断是否是所需要的url

// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）

//假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）

Uri uri = Uri.parse(url);

// 如果url的协议 = 预先约定的 js 协议

// 就解析往下解析参数

if ( uri.getScheme().equals("js")) {

// 如果 authority = 预先约定协议里的 webview，即代表都符合约定的协议

// 所以拦截url,下面JS开始调用Android需要的方法

if (uri.getAuthority().equals("webview")) {

// 步骤3：

// 执行JS所需要调用的逻辑

System.out.println("js调用了Android的方法");

// 可以在协议上带有参数并传递到Android上

HashMap<String, String> params = new HashMap<>();

Set<String> collection = uri.getQueryParameterNames();

}

return true;

}

return super.shouldOverrideUrlLoading(view, url);

}

);

}

特点

优点：不存在方式1的漏洞；
缺点：JS获取Android方法的返回值复杂。

如果JS想要得到Android方法的返回值，只能通过 WebView 的 loadUrl （）去执行 JS 方法把返回值传递回去，相关的代码如下：

// Android：MainActivity.java

mWebView.loadUrl("javascript：returnResult(" + result + ")");

// JS：javascript.html

function returnResult(result){

alert("result is" + result);

}

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

在JS中，有三个常用的对话框方法：

方式3的原理：Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框

（即上述三个方法），得到他们的消息内容，然后解析即可。

下面的例子将用拦截 JS的输入框（即prompt（）方法）说明：

常用的拦截是：拦截 JS的输入框（即prompt（）方法）
因为只有prompt（）可以返回任意类型的值，操作最全面方便、更加灵活；而alert（）对话框没有返回值；confirm（）对话框只能返回两种状态（确定 / 取消）两个值

步骤1：加载JS代码，如下：

javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>

<html>

<head>

<title>Carson_Ho</title>

function clickprompt(){

// 调用prompt（）

var result=prompt("js://demo?arg1=111&arg2=222");

alert("demo " + result);

}

</script>

</head>

<body>

<button type="button" id="button1" onclick="clickprompt()">点击调用Android代码</button>

</body>

</html>

当使用mWebView.loadUrl("file:///android_asset/javascript.html")加载了上述JS代码后，就会触发回调onJsPrompt（），具体如下：

如果是拦截警告框（即alert()），则触发回调onJsAlert（）；
如果是拦截确认框（即confirm()），则触发回调onJsConfirm（）；

步骤2：在Android通过WebChromeClient复写onJsPrompt（）

public class MainActivity extends AppCompatActivity {

WebView mWebView;

// Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限

webSettings.setJavaScriptEnabled(true);

// 设置允许JS弹窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 先加载JS代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

mWebView.setWebChromeClient(new WebChromeClient() {

// 拦截输入框(原理同方式2)

// 参数message:代表promt（）的内容（不是url）

// 参数result:代表输入框的返回值

@Override

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

// 根据协议的参数，判断是否是所需要的url(原理同方式2)

// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）

//假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）

Uri uri = Uri.parse(message);

// 如果url的协议 = 预先约定的 js 协议

// 就解析往下解析参数

if ( uri.getScheme().equals("js")) {

// 如果 authority = 预先约定协议里的 webview，即代表都符合约定的协议

// 所以拦截url,下面JS开始调用Android需要的方法

if (uri.getAuthority().equals("webview")) {

// 执行JS所需要调用的逻辑

System.out.println("js调用了Android的方法");

// 可以在协议上带有参数并传递到Android上

HashMap<String, String> params = new HashMap<>();

Set<String> collection = uri.getQueryParameterNames();

//参数result:代表消息框的返回值(输入值)

result.confirm("js调用了Android的方法成功啦");

}

return true;

}

return super.onJsPrompt(view, url, message, defaultValue, result);

}

// 通过alert()和confirm()拦截的原理相同，此处不作过多讲述

// 拦截JS的警告框

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

return super.onJsAlert(view, url, message, result);

}

// 拦截JS的确认框

@Override

public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {

return super.onJsConfirm(view, url, message, result);

}

);

}

Demo地址
上述所有代码均存放在：Carson_Ho的Github地址： WebView Demo

2.2.2 三种方式的对比 & 使用场景

3. 总结

本文主要对Android通过WebView与JS的交互方式进行了全面介绍

关于WebView的系列文章对你有所帮助
Android开发：最全面、最易懂的Webview详解
Android：你不知道的 WebView 使用漏洞
手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案
接下来我会继续讲解其他安卓开发的知识，有兴趣可以继续关注Carson_Ho的安卓开发笔记！！！！

请评论点赞！因为你们的赞同/鼓励是我写作的最大动力！

.前言

目前很多公司的 App 就只使用一个 WebView 作为整体框架， App 中的所有内容全部使用 HTML5 进行展示，这样只需要写一次 HTML5 代码，就可以在 Android 和 iOS 平台上运行，这就是所谓的「跨平台」。随着 HTML5 的普及，很多 App 都会内嵌 WebView 来加载 HTML5 页面，即 Native 和 HTML5 共存，这就是当下最流行的「混合开发」。HTML5 除了开发简单，还有一个优势就是迭代方便, 只需要修改服务端的 HTML5 页面，App 会同步更新，无论是做活动推广 App 还是及时修复 Bug 都带来的极大的便利。不过 HTML5 劣势也很明显，受制于国内的网速限制。虽然国内已经普及了 4g 网络，但是网速还是不尽如人意。HTML5 加载受限于网络，没有原生控件流畅，用户体验相对较差，所以目前完全使用 HTML5 开发 App 并没有成为主流。我所在的项目组也使用HTML5开发比较频繁，这个时候了解WebView使用就变得尤为重要了，而WebView的坑也是非常的多，我在开发中就遇到了许多莫名其妙的问题。所以准备写几篇文章总结一下，文章按照类来进行分类。WebView开发常用的类是 WebView , WebSettings , WebViewClient , WebChromeClient。
这里是WebView开发第一篇： WebView 的使用介绍；

Android WebView 简介
==
我们先来看一下官方对Android WebView的介绍

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

总结起来就是：WebView是一个基于WebKit引擎的，并且可以在activity展现Web页面的控件。

简单使用
==
3.1、添加网络权限
–

<uses-permission android:name="android.permission.INTERNET" />

3.2 添加布局页面
这里介绍另外一种方式，通过addView添加进去
1.在布局页面添加布局

  <FrameLayout
        android:id="@+id/webViewWrap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />

2.实体化webview并添加到布局中

		webViewWrap = findViewById(R.id.webViewWrap); //上面的FrameLayout
        webView = new WebView(MyApplication.getAppContext()); //使用应用上下文，可以防止内存泄露，如果传入activity的上下文，需要将webview remove掉。下面有讲解。
        webViewWrap.addView(webView);

3.加载页面

//方式1. 加载一个网页：
  webView.loadUrl("http://www.google.com/");

  //方式2：加载apk包中的html页面
  webView.loadUrl("file:///android_asset/test.html");

  //方式3：加载手机本地的html页面
   webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

   // 方式4： 加载 HTML 页面的一小段内容
  WebView.loadData(String data, String mimeType, String encoding)
// 参数说明：
// 参数1：一段HTML代码
// 参数2：展示内容的类型
// 参数3：字节码

到这一步我们就能够展示一个WebView页面了，不过是通过外部浏览器打开的。但是还有许多优化的地方。

4.WebView的状态

//激活WebView为活跃状态，能正常执行网页的响应，可以在activity 的回调方法中调用
webView.onResume() ；

//当页面被失去焦点被切换到后台不可见状态，需要执行onPause，可以在activity 的回调方法中调用
//通过onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。
webView.onPause()；

//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
//它会暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。
webView.pauseTimers()

//恢复pauseTimers状态
webView.resumeTimers()；

//销毁Webview
//在关闭了Activity时，如果Webview的音乐或视频，还在播放。就必须销毁Webview
//但是注意：webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview:
ViewParent parent = mWebView.getParent();
        if (parent != null) {
            ((ViewGroup) parent).removeView(mWebView);// 防止内存泄露
        } 
webView.destroy();

关于前进 / 后退网页
==

//是否可以后退
Webview.canGoBack() 
//后退网页
Webview.goBack()

//是否可以前进                     
Webview.canGoForward()
//前进网页
Webview.goForward()

//以当前的index为起始点前进或者后退到历史记录中指定的steps
//如果steps为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps)

常见用法：Back键控制网页后退

问题：在不做任何处理前提下，浏览网页时点击系统的“Back”键,整个 Browser 会调用 finish()而结束自身
目标：点击返回后，是网页回退而不是推出浏览器
解决方案：在当前Activity中处理并消费掉该 Back 事件

清除缓存数据
==

//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);

//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；

//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

WebView 的使用介绍就先到这里了，下一篇将会讲解WebSettings的使用。

结：

Android 调用 js:

在 Android 中创建通往 javascript 的接口;

在 html 中定义要执行的方法;

在 Android 中的具体事件中进行调用。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">contentWebView.loadUrl("javascript：javacalljs()");

</pre>

js中调用Android 方法 :

html中调用 Android 方法则反来，在 Andorid 中定义要调用的方法， html 中绑定事件进行调用。 </pre>

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;"><button onclick="window.wjj.startFunction()">点击调用java 代码</button></pre>

Android 展示 html 页面

（1）project 视图下，在 Android 工程中新建目录 assets;

image

（2）在 assets 目录下新建 html 页面如 show.html；

（3）Android 界面中在 WebView 中展示 show.html；

（4）Android 原生按钮点击执行 html 中的 js 方法；

image

界面设计：

image

html 中的 js:

image

效果：

image

js 调用 android 方法

还是需要一个接口：

image

Andorid中定义相应的执行方法（注意带上相应的注解）：

image

html 中进行调用：

image

效果（弹的吐司没截下来）：

在线咨询

上一篇：教育部留学服务中心《学历认证》网络申请流程及最新消息
下一篇：从BC会计到顶尖券商，他是一个有故事的留学生

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Android：WebView与 JS 交互方式 都在这里了

言

目录

1. 交互方式总结

2. 具体分析

方式2：通过WebView的evaluateJavascript（）

2.2 JS通过WebView调用 Android 代码

特点

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

特点

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

3. 总结

请评论点赞！因为你们的赞同/鼓励是我写作的最大动力！

.前言

4.WebView的状态

您的项目需求

Android：WebView与 JS 交互方式都在这里了

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