Android中使用WebView与JS交互全解析

CSDN 2016-11-29 10:23

首先，需要提出一个概念，那就是hybrid，主要意思就是native原生Android和h5混合开发。为什么要这样做呢？大家可以想象一下针对于同一个活动，如果使用纯native的开发方式，Android和iOS两边都要维护同一套界面甚至是逻辑，这样开发和维护的成本会很大，而使用hybrid的开发方式的话，让前端的同学去写一套界面和逻辑，对于native端来说只要使用对应的容器去展示就可以了(对于Android来说这个容器当然就是WebView)。那为什么不所有的页面都使用这种方式开发呢？因为使用h5来展示界面的话用户体验始终是不如native的，所以在这两者之间我们需要一个权衡。

介绍完了何为hybrid，我们来思考下面几个场景：

• 场景1：前端那边的页面有一个按钮，点击这个按钮需要显示一个native的组件(比如一个toast)，或者点击这个按钮需要去在native端执行一个耗时的任务。

• 场景2：还是前端页面有一个按钮，点击这个按钮的逻辑是：如果登录了，则跳转到相应的界面，如果没有登录，则跳转到登录界面。而这个登录界面是我们native维护的。

看完上面两个场景，相信大家也发现了一个问题，hybrid这样的开发方式有一个问题需要解决，那就是前端和本地的通信。下面将会给大家介绍active原生Android和h5之间的通信方式。

➤如何使用WebView

使用WebView控件 与其他控件的使用方法相同 在layout中使用一个”WebView”标签，WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页，在WebView中加载Web页面，使用loadUrl

注意在manifest文件中加入访问互联网的权限：

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

但是，在Android中点击一个链接，默认是调用手机上已经安装的浏览器程序来启动，因此想要通过WebView代为处理这个动作 ，那么需要通过WebViewClient

当然，我们也可以写一个类继承WebViewClient来对WebViewClient对象进行扩展

然后只需要将setWebViewClient的内容进行修改即可

另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器，也就是需要可以回退历史记录，因此需要覆盖系统的回退键 goBack，goForward可向前向后浏览历史页面

例子1：WebViewClient的使用

布局代码activity_main.xml：

MainActivity代码：

public class MainActivity extends Activity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 获取webview控件

webView = (WebView) findViewById(R.id.webView);

//设置WebViewClient

/*webView.setWebViewClient(new MyWebViewClient);*/

//使用webview加载页面

webView.loadUrl("http://www.baidu.com");

webView.setWebViewClient(new WebViewClient {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

// TODO Auto-generated method stub

super.onPageStarted(view, url, favicon);

}

@Override

public void onPageFinished(WebView view, String url) {

// TODO Aut (view, url);

}

});

}

@Override

//覆盖系统的回退键

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack) {

webView.goBack;

return true;

}

return super.onKeyDown(keyCode, event);

}

}

➤JavaScript和java的相互调用

WebSetting用处非常大,通过WebSetting可以使用Android原生的JavascriptInterface来进行js和Java的通信。

例子2：JavaScript和java的相互调用

首先我们写一段html代码：

这是一个很简单的HTML5页面，里面有一个button，点击这个button就执行js脚本中的showToast方法。

那么这个showToast方法做了什么呢？

可以看到control.showToast，这个是什么我们后面再说，下面看我们Android工程中的java代码。

编写布局文件activity_main.xml

布局的内容很简单，就是嵌套一个WebView控件

编写MainActivity.java代码

package com.example.hybirddemo;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.os.Bundle;

import android.util.Log;

import android.view.Menu;

import android.view.MenuItem;

import android.webkit.JavascriptInterface;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.widget.Toast;

public class MainActivity extends Activity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 获取webview控件

webView = (WebView) findViewById(R.id.webView);

// 获取WebView的设置

WebSettings webSettings = webView.getSettings;

// 将JavaScript设置为可用，这一句话是必须的，不然所做一切都是徒劳的

webSettings.setJavaScriptEnabled(true);

//给webview添加JavaScript接口

webView.addJavascriptInterface(new JsInterface, "control");

//通过webview加载html页面

webView.loadUrl("file:///android_asset/MyHtml.html");

}

public class JsInterface{

@JavascriptInterface

public void showToast(String toast) {

Toast.makeText(MainActivity.this,toast , Toast.LENGTH_SHORT).show;

Log.d("html", "show toast success");

}

public void log(final String msg) {

webView.post(new Runnable {

@Override

public void run {

webView.loadUrl("javascript log("+"'"+msg+"'"+")");

}

});

}

}

}

上面的代码主要做了以下的步骤：

a) 获取webview控件

b) 获取webview的设置，将JavaScript设置为可用，打开JavaScript的通道

c) 在Android程序中建立接口 ，并编写相关逻辑

再去看之前js脚本中的那个showToast方法

这里的control就是我们的那个interface，调用了interface的showToast方法，很明显这里是js调用了Android的代码，输出了一个Toast

可以看到这个interface我们给它取名叫control，最后通过loadUrl加载页面。

可以看到先显示一个toast，然后调用log方法，log方法里调用了js脚本的log方法, js的log方法做的事就是在控制台输出msg,这里明显是Android调用了js的方法。

d) 给webview添加我们自己编写的JavaScript接口

通过WebView的addJavascriptInterface方法去注入一个我们自己写的interface。

e) 使用webview控件加载我们之前编写的html文件

在真实手机上运行程序，在控制台成功输出内容:

这样我们就完成了js和java的互调，是不是很简单。

➤Android中处理JS的警告，对话框等

在Android中处理JS的警告，对话框等需要对WebView设置WebChromeClient对象,并复写其中的onJsAlert，onJsConfirm，onJsPrompt方法可以处理javascript的常用对话框

例子3：在Android中处理javascript的对话框

1) 编写html页面布局

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 " />

<title>分别测试javascript的三种对话框</title>

<script language="javascript">

function ale

{

alert("这是一个警告对话框！");

}

function firm

{

if(confirm("更多信息请到我的博客去？"))

{

location.href="http://yarin.javaeye.com";

}

else

{

alert("你选择了不去！");

}

}

function prom

{

var str=prompt("演示一个带输入的对话框","这里输入你的信息");

if(str)

{

alert("谢谢使用，你输入的是："+ str)

}

}

</script>

</head>

<body>

<p>下面我们演示3种对话框</p>

<p>警告、提醒对话框</p>

<p>

<input type="submit" name="Submit" value="提交" onclick="ale" />

</p>

<p>带选择的对话框</p>

<p>

<input type="submit" name="Submit2" value="提交" onclick="firm" />

</p>

<p>要求用户输入的对话框</p>

<p>

<input type="submit" name="Submit3" value="提交" onclick="prom" />

</p>

</body>

</html>

页面效果：

2) Android中布局的编写

3) 编写自定义对话框的布局

新建prom_dialog.xml文件，在其中自定义一个带输入的对话框由TextView和EditText构成

4) 获取WebView控件，并进行相关的设置

5) 复写onKeyDown方法，当用户按返回键时，返回上一个加载的页面

6) 给WebView设置setWebChromeClient，并复写其中的方法

图1 dialog.html页面

图2 javascript的警告对话框

图3 javascript的confirm对话框

图4 javascript的prompt对话框

总结：在这个项目中，使用setWebChromeClient方法来为WebView设置一个WebChromeClient对象，来辅助WebView来处理Javascript的对话框等，图4是我们自定义的对话框，图2和图3我们都只需要监听按钮的点击事件，然后通过confirm和cancel方法将我们的操作传递给Javascript进行处理。当你在图1的界面，点击第一个按钮时，会打开图2的对话框，点击第二个按钮时，会打开图3的对话框，同时在这里点击确定，会跳转到另一个页面，当点击第三个按钮时，会打开图4对话框，并且可以输入内容。