前言：
之前开发所有版本的APP中，WebView使用的很少，一般都是详情页里面没有交互作用的页面展示，或者是商家页面中类似问答（同样没有交互）页面的展示。现如今碰到一种需求，需要获取WebView加载的非本地网页中，用户在输入框中添加的内容。这可就fucking egg……
在百度中搜索了一堆资料，绝大部分都是本地交互的，先走一遍本地交互（html文件是本地的，或者是自己公司开发的可以商量修改的）
添加assets目录
本地交互
- 申请网络权限
<uses-permission android:name="android.permission.INTERNET"></uses-permission> - 造html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>本地html文件与Java代码的互相调用</title>
<script language="javascript">
window.onload = function(){//html文档结构加载完毕之后才会执行
var submit = document.getElementById('submit');
submit.onclick = function(){//添加提交按钮的监听事件
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
//我想调用Android里面的代码
window.androidObj.getInputValue(name,password);
}
}
//我想被Android代码调用
function callByAndroidCode(){
alert("callByAndroidCode");
return 'hello js';
}
</script>
</head>
<body >
<form>
<table bgColor='#ececec' cellspacing=1>
<tr>
<td align='center'>用户名：</td>
<td><input type='text' name='name' id='name' maxlength=20></td>
</tr>
<tr>
<td align='center'>密码：</td>
<td><input type='password' name='password' id='password' ></td>
</tr>
<tr>
<td><input type='button' name='submit' id='submit' value='提交'></td>
</tr>
</table>
</form>
</body>
</html>
- 造布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.gome.retrofit.retrofitdemo.MainActivity">
<Button
android:id="@+id/callJsCodeBT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="调用Js的代码" />
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"></WebView>
</RelativeLayout>
- 造Activity
1.主要步骤是先打开setJavaScriptEnabled(true)
2.创建一个非空类，方法名称上要有@JavascriptInterface这样的注解
3.创建对象，并且往页面中添加java对象“androidObj”，这个名称随意
4.自定义WebViewClient
5.加载资源
package com.gome.retrofit.retrofitdemo;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.webkit.CookieManager;
import android.webkit.JavascriptInterface;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
public class SecondActivity extends AppCompatActivity implements View.OnClickListener {
private static final String TAG = "SecondActivity";
private WebView webView;
private Button callJsCodeBT;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
callJsCodeBT = (Button) findViewById(R.id.callJsCodeBT);
callJsCodeBT.setOnClickListener(this);
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);//打开JS开关
webView.addJavascriptInterface(new AndroidObj(), "androidObj");//往要访问的文档里面塞一个window下的androidObj对象
webView.setWebViewClient(new CustomWebViewClient());//自定义一个WebViewClient，可以控制当前访问页面的进度，加载情况等
webView.loadUrl("file:///android_asset/demo.html");
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.callJsCodeBT:
webView.loadUrl("javascript:callByAndroidCode()");
break;
}
}
class AndroidObj{
/**
* 在js中调用该方法，放回输入框中的数据
* @param username
* @param password
*/
@JavascriptInterface//这个注解必须要声明，不然编译会报错
public void getInputValue(String username,String password){
Log.i(TAG,"username:"+username+" password:"+password);
}
}
final class CustomWebViewClient extends WebViewClient {
@Override
public void onPageCommitVisible(WebView view, String url) {
Log.i("onPageCommitVisible",url);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
return super.shouldOverrideUrlLoading(view, request);
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
//我比较喜欢在页面加载完毕的时候搞事儿
@Override
public void onPageFinished(WebView view, String url) {
//document.body.innerHTML 获取body体里面的内容
// view.loadUrl("javascript:window.local_obj.showSource(document.body.innerHTML);");
}
}
}
运行以上代码，基本上没啥大问题
Android4.2js调用的方法上面@JavascriptInterface 的问题
4.2之前存在重大安全隐患，因为js可以通过反射访问注入Webview中Java对象的public fields，在一个包含不信任内容的WebView中使用这个方法，会允许攻击者去篡改应用程序，使用宿主应用程序的权限执行Java代码，因此4.2之后，任何JS调用的Java对象接口，都需要添加@JavascriptInterface注解，这样的结果是
Java对象的fields属性将不允许js来访问
（之前还幻想着写个Java属性，直接从js中获取数据赋值给Java属性多好，哎想多了）
参考链接
获取web加载页面的HTML内容信息
在AndroidObj中添加获取源码的方法
//获取整个页面元文件
@JavascriptInterface
public void getHtmlSource(String htmlSource){
Log.i(TAG,htmlSource);
}
然后重写自定义的WebViewClient中的onPageFinished方法，添加如下代码：
public void onPageFinished(WebView view, String url) {
//document.body.innerHTML 获取<body></body>体里面的内容
//document.documentElement.outerHTML 获取整个页面的元素包括<html></html>，但是<html>标签上面关于机构，DTD信息的注释就没有了
view.loadUrl("javascript:window.androidObj.getHtmlSource(document.documentElement.outerHTML)");
}
此时随便加载一个页面都可以获取该页面的源代码。
获取网页中输入框中输入的数据
tip:这个网页不是本地的，也不是自己公司前端写的
如果需求是这样，用户点击登录按钮的时候，获取用户输入的登录信息。
这个时候就需要用电脑浏览器打开这个页面，查看用户在登录的时候，调用了什么js方法。
- 看看能不能自己重写一下这个js方法，如果可以，直接重写。
- 看看能不能在中间的某个js方法中添加我需要获取数据的代码
- ……各种方法都不行
- 最后拿出3板斧，重写整个页面。
举个例子：
目前我碰到的问题就是当提交用户数据的时候，执行到最后，调用了“before_submit”和do_encrypt方法，他们的执行顺序是这样的
before_submit();do_encrypt();
当时在源文件里面是有do_encrypt这个方法的（一看方法名称就知道是对用户传递的数据进行加密操作），过两天后发现do_encrypt方法已经不存在了，最后我只能在before_submit方法中获取最原始的用户输入操作。
我的操作步骤如下
1.在onPageFinished中获取网页源代码
@Override
public void onPageFinished(WebView view, String url) {
if(!isDown){
isDown = false;
view.loadUrl("javascript:window.androidObj.showSource(document.documentElement.outerHTML);");
}
//获取当前WebView保存的cookie信息
CookieManager cookieManager = CookieManager.getInstance();
String cookie = cookieManager.getCookie("http://www.bjgjj.gov.cn");
Log.i("onPageFinished",cookie);
}
2.在注入的java对象的类中添加接收网页源码的方法，修改源码，然后进行重新加载
@JavascriptInterface
public void showSource(String html) {
StringBuilder sb = new StringBuilder(html);
char zuo = 0x7B;//{花括号
String replaceString = "before_submit()"+zuo ;
int index = sb.indexOf(replaceString);
if (index>-1){
//下面是要新增的js代码，用来获取网页中用户在id=lb id=bh1 bh2 bh3 bh4 bh5 mm1 mm2 mm3……中输入的数据
String newString = "var type = $(\"#lb\").val();var bh1 = $(\"#bh1\").val();var mm1 = $(\"#mm1\").val();var bh2 = $(\"#bh2\").val();var mm2 = $(\"#mm2\").val();var bh3 = $(\"#bh3\").val();var mm3 = $(\"#mm3\").val();var bh4 = $(\"#bh4\").val();var mm4 = $(\"#mm4\").val();var bh5 = $(\"#bh5\").val();var mm5 = $(\"#mm5\").val();window.androidObj.getInputValue(type,bh1,mm1,bh2,mm2,bh3,mm3,bh4,mm4,bh5,mm5);";
sb.insert(index+replaceString.length(),newString);
System.out.println(sb.toString());
//在handler中重新加载sb中的数据
Message message = Message.obtain();
message.what = 1;
message.obj = sb.toString();
handler.sendMessage(message);
}
}
@JavascriptInterface
public void getInputValue(String type,String bh1,String mm1,String bh2,String mm2,String bh3,String mm3,String bh4,String mm4,String bh5,String mm5){
Log.i("type:",type);
Log.i("bh5:",bh5);
Log.i("bh4:",bh4);
Log.i("bh3:",bh3);
Log.i("bh2:",bh2);
Log.i("bh1:",bh1);
Log.i("mm1:",mm1);
Log.i("mm2:",mm2);
Log.i("mm3:",mm3);
Log.i("mm4:",mm4);
Log.i("mm5:",mm5);
}
- 在Handler中重新加载
private final Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case 1:
webView.loadDataWithBaseURL("baseURL当前页面的上级目录",msg.obj.toString(),"text/html; charset=utf-8",null,null);
break;
}
}
};
第三个参数和第四个参数最好连写在一块，单独写会出现乱码问题
用户只要一点击登录按钮，就会触发我注入androidObj对象中的getInputValue方法，从此方法中获取我想要获取的数据
