前言：
之前開(kāi)發(fā)所有版本的APP中傻昙，WebView使用的很少刁标，一般都是詳情頁(yè)里面沒(méi)有交互作用的頁(yè)面展示博助，或者是商家頁(yè)面中類似問(wèn)答（同樣沒(méi)有交互）頁(yè)面的展示∶氤啵現(xiàn)如今碰到一種需求猪瞬，需要獲取WebView加載的非本地網(wǎng)頁(yè)中，用戶在輸入框中添加的內(nèi)容入篮。這可就fucking egg……
在百度中搜索了一堆資料陈瘦，絕大部分都是本地交互的，先走一遍本地交互（html文件是本地的潮售，或者是自己公司開(kāi)發(fā)的可以商量修改的）
添加assets目錄
本地交互
- 申請(qǐng)網(wǎng)絡(luò)權(quán)限
<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代碼的互相調(diào)用</title>
<script language="javascript">
window.onload = function(){//html文檔結(jié)構(gòu)加載完畢之后才會(huì)執(zhí)行
var submit = document.getElementById('submit');
submit.onclick = function(){//添加提交按鈕的監(jiān)聽(tīng)事件
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
//我想調(diào)用Android里面的代碼
window.androidObj.getInputValue(name,password);
}
}
//我想被Android代碼調(diào)用
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="調(diào)用Js的代碼" />
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"></WebView>
</RelativeLayout>
- 造Activity
1.主要步驟是先打開(kāi)setJavaScriptEnabled(true)
2.創(chuàng)建一個(gè)非空類痊项，方法名稱上要有@JavascriptInterface這樣的注解
3.創(chuàng)建對(duì)象，并且往頁(yè)面中添加java對(duì)象“androidObj”酥诽，這個(gè)名稱隨意
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);//打開(kāi)JS開(kāi)關(guān)
webView.addJavascriptInterface(new AndroidObj(), "androidObj");//往要訪問(wèn)的文檔里面塞一個(gè)window下的androidObj對(duì)象
webView.setWebViewClient(new CustomWebViewClient());//自定義一個(gè)WebViewClient鞍泉，可以控制當(dāng)前訪問(wèn)頁(yè)面的進(jìn)度，加載情況等
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中調(diào)用該方法肮帐，放回輸入框中的數(shù)據(jù)
* @param username
* @param password
*/
@JavascriptInterface//這個(gè)注解必須要聲明咖驮，不然編譯會(huì)報(bào)錯(cuò)
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);
}
//我比較喜歡在頁(yè)面加載完畢的時(shí)候搞事兒
@Override
public void onPageFinished(WebView view, String url) {
//document.body.innerHTML 獲取body體里面的內(nèi)容
// view.loadUrl("javascript:window.local_obj.showSource(document.body.innerHTML);");
}
}
}
運(yùn)行以上代碼，基本上沒(méi)啥大問(wèn)題
Android4.2js調(diào)用的方法上面@JavascriptInterface 的問(wèn)題
4.2之前存在重大安全隱患训枢，因?yàn)閖s可以通過(guò)反射訪問(wèn)注入Webview中Java對(duì)象的public fields托修，在一個(gè)包含不信任內(nèi)容的WebView中使用這個(gè)方法，會(huì)允許攻擊者去篡改應(yīng)用程序恒界，使用宿主應(yīng)用程序的權(quán)限執(zhí)行Java代碼睦刃，因此4.2之后，任何JS調(diào)用的Java對(duì)象接口仗处，都需要添加@JavascriptInterface注解眯勾，這樣的結(jié)果是
Java對(duì)象的fields屬性將不允許js來(lái)訪問(wèn)
（之前還幻想著寫(xiě)個(gè)Java屬性，直接從js中獲取數(shù)據(jù)賦值給Java屬性多好婆誓，哎想多了）
參考鏈接
獲取web加載頁(yè)面的HTML內(nèi)容信息
在AndroidObj中添加獲取源碼的方法
//獲取整個(gè)頁(yè)面元文件
@JavascriptInterface
public void getHtmlSource(String htmlSource){
Log.i(TAG,htmlSource);
}
然后重寫(xiě)自定義的WebViewClient中的onPageFinished方法吃环，添加如下代碼：
public void onPageFinished(WebView view, String url) {
//document.body.innerHTML 獲取<body></body>體里面的內(nèi)容
//document.documentElement.outerHTML 獲取整個(gè)頁(yè)面的元素包括<html></html>，但是<html>標(biāo)簽上面關(guān)于機(jī)構(gòu)洋幻，DTD信息的注釋就沒(méi)有了
view.loadUrl("javascript:window.androidObj.getHtmlSource(document.documentElement.outerHTML)");
}
此時(shí)隨便加載一個(gè)頁(yè)面都可以獲取該頁(yè)面的源代碼郁轻。
獲取網(wǎng)頁(yè)中輸入框中輸入的數(shù)據(jù)
tip:這個(gè)網(wǎng)頁(yè)不是本地的，也不是自己公司前端寫(xiě)的
如果需求是這樣文留，用戶點(diǎn)擊登錄按鈕的時(shí)候好唯，獲取用戶輸入的登錄信息。
這個(gè)時(shí)候就需要用電腦瀏覽器打開(kāi)這個(gè)頁(yè)面燥翅，查看用戶在登錄的時(shí)候骑篙，調(diào)用了什么js方法。
- 看看能不能自己重寫(xiě)一下這個(gè)js方法森书，如果可以靶端，直接重寫(xiě)谎势。
- 看看能不能在中間的某個(gè)js方法中添加我需要獲取數(shù)據(jù)的代碼
- ……各種方法都不行
- 最后拿出3板斧，重寫(xiě)整個(gè)頁(yè)面杨名。
舉個(gè)例子：
目前我碰到的問(wèn)題就是當(dāng)提交用戶數(shù)據(jù)的時(shí)候脏榆，執(zhí)行到最后，調(diào)用了“before_submit”和do_encrypt方法台谍，他們的執(zhí)行順序是這樣的
before_submit();do_encrypt();
當(dāng)時(shí)在源文件里面是有do_encrypt這個(gè)方法的（一看方法名稱就知道是對(duì)用戶傳遞的數(shù)據(jù)進(jìn)行加密操作）须喂，過(guò)兩天后發(fā)現(xiàn)do_encrypt方法已經(jīng)不存在了，最后我只能在before_submit方法中獲取最原始的用戶輸入操作趁蕊。
我的操作步驟如下
1.在onPageFinished中獲取網(wǎng)頁(yè)源代碼
@Override
public void onPageFinished(WebView view, String url) {
if(!isDown){
isDown = false;
view.loadUrl("javascript:window.androidObj.showSource(document.documentElement.outerHTML);");
}
//獲取當(dāng)前WebView保存的cookie信息
CookieManager cookieManager = CookieManager.getInstance();
String cookie = cookieManager.getCookie("http://www.bjgjj.gov.cn");
Log.i("onPageFinished",cookie);
}
2.在注入的java對(duì)象的類中添加接收網(wǎng)頁(yè)源碼的方法坞生，修改源碼，然后進(jìn)行重新加載
@JavascriptInterface
public void showSource(String html) {
StringBuilder sb = new StringBuilder(html);
char zuo = 0x7B;//{花括號(hào)
String replaceString = "before_submit()"+zuo ;
int index = sb.indexOf(replaceString);
if (index>-1){
//下面是要新增的js代碼介衔，用來(lái)獲取網(wǎng)頁(yè)中用戶在id=lb id=bh1 bh2 bh3 bh4 bh5 mm1 mm2 mm3……中輸入的數(shù)據(jù)
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中的數(shù)據(jù)
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當(dāng)前頁(yè)面的上級(jí)目錄",msg.obj.toString(),"text/html; charset=utf-8",null,null);
break;
}
}
};
第三個(gè)參數(shù)和第四個(gè)參數(shù)最好連寫(xiě)在一塊掸茅，單獨(dú)寫(xiě)會(huì)出現(xiàn)亂碼問(wèn)題
用戶只要一點(diǎn)擊登錄按鈕撞芍，就會(huì)觸發(fā)我注入androidObj對(duì)象中的getInputValue方法，從此方法中獲取我想要獲取的數(shù)據(jù)
