前言
在開發(fā)KeepGank的過程中遇到了一個(gè)問題这刷，就是Github的手機(jī)版本網(wǎng)頁(yè)進(jìn)入時(shí)會(huì)是這個(gè)樣子褐啡。
比如打開RxJava的網(wǎng)頁(yè)會(huì)是這個(gè)樣子，路徑為：https://github.com/ReactiveX/RxJava
而我希望用戶點(diǎn)開我的鏈接后進(jìn)入的直接是以下界面蹦掐。因?yàn)槭謾C(jī)直接看README比較直觀蟀伸，不需要先進(jìn)入那么復(fù)雜的界面、
以下路徑為：https://github.com/ReactiveX/RxJava/blob/2.x/README.md
而用戶的點(diǎn)擊界面是這樣的：
那么面臨一個(gè)問題翔横，如何讓W(xué)ebView加載https://github.com/ReactiveX/RxJava時(shí)加載到https://github.com/ReactiveX/RxJava/blob/2.x/README.md路徑读跷。
方案一
我們可以首先直接使用http獲取到https://travis-ci.org/ReactiveX/RxJava/的網(wǎng)頁(yè)源碼，而其中是有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 路徑就可以了荡短。
這個(gè)方案有個(gè)缺點(diǎn)丐枉，前面需要分析HTML，且分析HTML就要用到jsoup包, 為了這么個(gè)需求就要用到一個(gè)包實(shí)在是不情愿掘托，而且預(yù)加載html的時(shí)候還要浪費(fèi)時(shí)間瘦锹。
更坑爹的是，若有工程沒有README.md 那么我們只能加載原來的路徑闪盔，那中間這些分析過程都白分析了弯院。
方案二
通過WebView的JavascriptInterface 回調(diào)，能夠拿到WebView的html锭沟，做到了先顯示后拿到數(shù)據(jù)分析再顯示的效果抽兆。代碼如下，不過缺點(diǎn)還是需要去分析HTML文本族淮。這個(gè)分析代碼是煩人的，我這么懶得人不想寫凭涂，因?yàn)檫@肯定占據(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來解決這事情。
我們?cè)俅尾榭碒TML代碼澎胡。是一個(gè)class="bubble-actions"包裹了class="bubble-action"孕荠，內(nèi)容data為"View all of README.md". 這三個(gè)因素決定了這個(gè)href 才是目標(biāo)路徑娩鹉。因?yàn)閎ubble-actions這些class該網(wǎng)頁(yè)中有好多個(gè)。
<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獲取到一個(gè)list个曙，再遍歷這個(gè)list里面若有bubble-action元素锈嫩，再去判斷data是否為README.md。若是的話直接獲取其href 并賦值給window.location.href即可以實(shí)現(xiàn)垦搬。
通過這種方式呼寸，當(dāng)我們點(diǎn)開一個(gè)工程時(shí)，便直接進(jìn)去的是它的README界面啦猴贰。因?yàn)槭謾C(jī)端還是直接看README比較直觀
本文作者：Anderson大碼渣/Jerey_Jobs
博客地址 ： http://jerey.cn/
簡(jiǎn)書地址 : Anderson大碼渣
github地址 : https://github.com/Jerey-Jobs
