一、配置WebView
setWebViewClient:對webview頁面加載管理、如url重定向
setWebChromeClient:主要是對js交互的處理。比如說:對話框、title、頁面加載進(jìn)度條等等。
</br>
二、WebView與H5頁面的交互方式
很多情況下,js的交互都可以直接扔到WebView上自動處理。但有一些特殊情況,比如說:點擊h5頁面的按鈕跳轉(zhuǎn)去android原生頁面,或者h(yuǎn)5頁面中選擇手機中圖片作為用戶頭像等等。遇到這些問題,其實方案還是蠻多的。
方案一:
使用瀏覽器的開發(fā)者工具查看點擊時的產(chǎn)生的url或js處理,然后通過我們的shouldOverrideUrlLoading回調(diào)函數(shù)進(jìn)行處理?;蛘呖梢哉仪岸送瑢W(xué)約定好url格式為[scheme_name]:[params],舉個栗子吧:
前端代碼:document.location = "js://demo?arg1=111"; 或者<a href="js://demo?arg1=111">跳轉(zhuǎn)</a>,這時候我們就可以在shouldOverrideUrlLoading(webView, url)對url"js://demo?arg1=111"進(jìn)行判斷處理了。
// 示例代碼:
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
if(mInnerRedirect && StringUtil.isHttpUrl(url)){
webView.loadUrl(url);
return true;
}
// 處理前端定義好的JS協(xié)議(url)
boolean isIntercepted = ProtocolManager.getInstance().processProtocol(mActivity,mWebView,url);
return isIntercepted;
}
//上面ProtocolManager中的processProtocol方法
public boolean processProtocol(Context context, WebView webView, String url) {
if(context == null || TextUtils.isEmpty(url)) {
return false;
}
String pureUrl;
Map<String, String> paramMap = null;
int paramIndex = url.indexOf('?');
if(paramIndex != -1){
pureUrl = url.substring(0,paramIndex);
paramMap = StringUtil.extractParams(url);
} else {
pureUrl = url;
}
if(pureUrl.endsWith("/")) {
pureUrl = pureUrl.substring(0,pureUrl.length() - 1);
}
if(paramMap == null) {
paramMap = new HashMap<>(0);
}
for(IProtocolProcessor processor : mProcessorList) {
if(processor.process(context,webView,url,pureUrl,paramMap)) {
return true;
}
}
return false;
}
方案二:
使用谷歌推薦的webview.addJavascriptInterface(JavascriptInterface, obj_name),自定義一個JavascriptInterface以及相應(yīng)的js代碼。
比如點擊webview中圖片,然后本地顯示大圖的代碼:
public class JavascriptInterface {
@android.webkit.JavascriptInterface
public void startPhotoActivity(String imageUrl) {
Log.e("webView", "JavascriptInterface : " + imageUrl);
Intent intent = new Intent(MainActivity.this, PhotoActivity.class);
intent.putExtra("image_url", imageUrl);
startActivity(intent);
}
}
wvTest.addJavascriptInterface(new JavascriptInterface(),"mainActivity");
// JS代碼
function() {
// 獲取"img"標(biāo)簽的對象的集合
var imgs = document.getElementsByTagName("img");
for(var i = 0; i < imgs.length; i++) {
// 添加點擊事件
imgs[i].onclick = function() {
// "mainActivity"是在上面Java代碼中創(chuàng)建的
mainActivity.startPhotoActivity(this.src);
}
}
}
方案三:
WebChromeClient提供了不少高級交互的回調(diào)函數(shù),如:onShowFileChooser、onJsAlert、onProgressChanged等等。百度首頁的搜索欄上有個圖片上傳搜索功能,當(dāng)被點擊時就會觸發(fā)onShowFileChooser函數(shù)