前言
在開發(fā)KeepGank的過程中遇到了一個問題，就是Github的手機(jī)版本網(wǎng)頁進(jìn)入時會是這個樣子。
比如打開RxJava的網(wǎng)頁會是這個樣子，路徑為：https://github.com/ReactiveX/RxJava
而我希望用戶點開我的鏈接后進(jìn)入的直接是以下界面。因為手機(jī)直接看README比較直觀，不需要先進(jìn)入那么復(fù)雜的界面、
以下路徑為：https://github.com/ReactiveX/RxJava/blob/2.x/README.md
而用戶的點擊界面是這樣的：
那么面臨一個問題，如何讓W(xué)ebView加載https://github.com/ReactiveX/RxJava時加載到https://github.com/ReactiveX/RxJava/blob/2.x/README.md路徑。
方案一
我們可以首先直接使用http獲取到https://travis-ci.org/ReactiveX/RxJava/的網(wǎng)頁源碼，而其中是有README的跳轉(zhuǎn)路徑的，分析完HTML數(shù)據(jù)便可以找到目的URL。
<div class="bubble-actions">
<a href="/ReactiveX/RxJava/blob/2.x/README.md" class="bubble-action">
View all of README.md
</a>
</div>
這便是html代碼里面README.md的路徑了。
之后我們可以讓WebView加載https://github.com + /ReactiveX/RxJava/blob/2.x/README.md 路徑就可以了。
這個方案有個缺點，前面需要分析HTML，且分析HTML就要用到jsoup包, 為了這么個需求就要用到一個包實在是不情愿，而且預(yù)加載html的時候還要浪費時間。
更坑爹的是，若有工程沒有README.md 那么我們只能加載原來的路徑，那中間這些分析過程都白分析了。
方案二
通過WebView的JavascriptInterface 回調(diào)，能夠拿到WebView的html，做到了先顯示后拿到數(shù)據(jù)分析再顯示的效果。代碼如下，不過缺點還是需要去分析HTML文本。這個分析代碼是煩人的，我這么懶得人不想寫，因為這肯定占據(jù)很大內(nèi)存在分析html，涉及到太多的字符串匹配。
mWebView.addJavascriptInterface(new InJavaScriptLocalObj(), "local_obj");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:window.local_obj.showSource('<head>'+"
+ "document.getElementsByTagName('html')[0].innerHTML+'</head>');");
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
}
});
}
final class InJavaScriptLocalObj {
public void showSource(String html) {
System.out.println("====>html="+html);
}
}
方案三
我們是可以通過WebViewClient的onPageFinished加載js代碼的，上面的方法二也是通過加載js回調(diào)Java的方式來獲取html的。既然能加載JS我們大可以用JS來解決這事情。
我們再次查看HTML代碼。是一個class="bubble-actions"包裹了class="bubble-action"，內(nèi)容data為"View all of README.md". 這三個因素決定了這個href 才是目標(biāo)路徑。因為bubble-actions這些class該網(wǎng)頁中有好多個。
<div class="bubble-actions">
<a href="/ReactiveX/RxJava/blob/2.x/README.md" class="bubble-action">
View all of README.md
</a>
</div>
那么我們的js代碼可以這么寫。。。我這渣渣js
var myParagragh = document.getElementsByClassName("bubble-actions");
console.log("myParagragh length:", myParagragh.length);
for (var i = myParagragh.length - 1; i >= 0; i--) {
var a = myParagragh[i].getElementsByClassName("bubble-action");
if (a.length > 0) {
console.log("action:", a[0]);
console.log("action:", a[0].firstChild.data);
if (a[0].firstChild.data.indexOf("View all of README.md") > 0){
console.log("ok");
window.location.href=a[0].href;
}
}
}
我們先通過classname獲取到一個list，再遍歷這個list里面若有bubble-action元素，再去判斷data是否為README.md。若是的話直接獲取其href 并賦值給window.location.href即可以實現(xiàn)。
通過這種方式，當(dāng)我們點開一個工程時，便直接進(jìn)去的是它的README界面啦。因為手機(jī)端還是直接看README比較直觀
本文作者：Anderson大碼渣/Jerey_Jobs
博客地址 ： http://jerey.cn/
簡書地址 : Anderson大碼渣
github地址 : https://github.com/Jerey-Jobs
