序言
今天做專案的時候,老大讓我把之前做的webview開啟網頁的功能修改一下,說是要動態的獲取網頁的標題,然後顯示在我們自己app的標題欄上,然後我就屁顛屁顛的跑去看webview的原始碼,看看有沒有獲取標題這個方法。
需求:這個是我在Activity中放的一個webview,上面一個title,然後當我點選網頁中的連結的時候,我希望頁面的title也會跟著改變,當我返回的時候,我也希望title變回當前網頁的title
一、首先,webview的載入在這裡我們就不多說了,往上有很多這樣的例子,如果還不清楚的,請看Webview合集 - 簡書
二、然後我們需要獲取網頁的title
1、在webview中有一個元件,叫做WebChromeClient,這個元件是用來協助Webview處理Js的一些東西的,比如說網站的圖示,網站的title,網站的載入進度等等,所以我們可以用這個來獲取title。實現它裡面的onReceivedTitle這個方法即可:
WebChromeClient wcc = new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
tvTitle.setText(title);
}
};
複製程式碼
獲取這個title就可以了,可能有人要說了,你都沒有跟你訪問的url關聯起來,它怎麼就能獲取title了,難不成他還能上天不成,別急嘛!我們後面還有呢!
2、在webview中還有另外一個元件,叫做WebViewClient,這個元件主要用來輔助webview處理一些簡單的html頁面內容,比如各種通知,請求事件等等,也就是說在用這個元件你可以監聽網頁載入是否完成,是否開始等等,然後還有就是可以設定是否在外部瀏覽器中瀏覽:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
複製程式碼
在執行完這個元件之後我們再來繫結我們的url:
mWebView.loadUrl(url);
複製程式碼
好了,現在就可以實時的更換你的title了,但是這裡還有一個bug,當然了,這不是我的bug,是WebChromeClient的bug,按返回鍵的時候,是不會執行onReceivedTitle這個方法的,所以返回的時候title就不會動態的改變了,後來百度到有方法可以讓他動態的改變,那就是**自己維護,**何為自己維護呢:
就是自己建立一個棧,也就是list,來動態新增,刪除你瀏覽的網頁
好了,方法有了,我們們來實踐一下
private List<String> loadHistoryUrls=new ArrayList<>();
複製程式碼
然後我們在剛才WebViewClient那裡增加一個方法,onPageFinished,因為每次開啟新的網頁,完成之後都會執行這個方法:
@Override
public void onPageFinished(WebView view, String url) {
loadHistoryUrls.add(url);
}
複製程式碼
那我們在哪裡刪除呢?當然是返回的地方啊:
/**
* 改變返回鍵的功能,當網頁中有需要返回的介面時,網頁中優先
*
* @param keyCode
* @param event
* @return
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (mWebView.canGoBack()) {
if (loadHistoryUrls.size() > 1) {
//重新載入之前的頁面,這裡為了讓標題也能正常顯示
String url = loadHistoryUrls.get(loadHistoryUrls.size() - 2);
loadHistoryUrls.remove(loadHistoryUrls.size() - 1);
if (loadHistoryUrls.size() > 0) {
loadHistoryUrls.remove(loadHistoryUrls.size() - 1);
}
mWebView.loadUrl(url);
return true;
}
}
}
return super.onKeyDown(keyCode, event);
}
複製程式碼
好了,到這裡我們就維護好了標題實時改動了,我們來看看效果吧!