Android+物聯(lián)網(wǎng)培訓(xùn)之WebView案例分析

更新時(shí)間:2017-07-02 來(lái)源:黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院瀏覽量:

WebView案例分析
WebView(網(wǎng)絡(luò)視圖)能加載顯示網(wǎng)頁(yè)，可以將其視為一個(gè)瀏覽器。它使用了WebKit渲染引擎加載顯示網(wǎng)頁(yè)。

mWebView = new WebView(this);
setContentView(mWebView);

需要在AndroidManifest.xml文件中添加權(quán)限，否則會(huì)出現(xiàn)Web page not available錯(cuò)誤。
<uses-permission android:name="android.permission.INTERNET" />
調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁(yè)：
互聯(lián)網(wǎng)用：webView.loadUrl("http://www.baidu.com");
本地文件用：webView.loadUrl("file:///android_asset/index.html"); 本地文件存放在：assets文件中

1.1. 在WebView中如何讓JS與Java安全地互相調(diào)用

可參考文章http://www.pedant.cn/2014/07/04/webview-js-java-interface-research/

1.2. JS與Java的互調(diào)

1.2.1. Java調(diào)用JS

案例1以加載視頻聚合類網(wǎng)站為例類似優(yōu)酷/樂(lè)視網(wǎng)/鳳凰網(wǎng)
其中以優(yōu)酷網(wǎng)為特殊：在android 4.4 平臺(tái)webview 的 chorme內(nèi)核無(wú)法解析<a href=”http://xxx” target=”video”> 視頻鏈接</a> 像這個(gè)標(biāo)簽中 target=”video”就是當(dāng)前版本無(wú)法解析的問(wèn)題，我們應(yīng)該怎么去解決這個(gè)問(wèn)題呢？來(lái)分析一下，我們之前遇到的超鏈接都是target=”_blank” 或者”_self” 那么我們是不是應(yīng)該考慮將target 更改為_(kāi)self 呢。來(lái)嘗試一下

var ahrefs = document.getElementsByTagName('a');
if( ahrefs != undefined ) {
for(i = 0 ; i<ahrefs.length;i++ ){
if( ahrefs[i].target == 'video'){
ahrefs[i].target = '_self';}
}
}

這是我們的js代碼，那只需要我們調(diào)用一下這段js代碼就可以將target=”video”更改為target=”_self”.WebView的 loadUrl 就可以直接調(diào)用js代碼只要在js代碼的字符串前添加javascript: 就可以了。這樣就幫助了chorme 內(nèi)核將我們知道他們無(wú)法解析的屬性給提前解析了。
案例2去除youku 搜庫(kù)button提交form表單攔截事件 onsubmit

mWebView.loadUrl("javascript: var fromSearch = document.getElementById('mheader_search3');"
+ "if( fromSearch != undefined ) { fromSearch.target='_self' ; fromSearch.onsubmit = ''; }");

1.2.2. JS調(diào)用Java

案例1類似移動(dòng)端手機(jī)迅雷在當(dāng)前網(wǎng)頁(yè)查找可用視頻地址，查到以后提示用戶使用體驗(yàn)更佳的播放器進(jìn)行播放

settings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JavaInterface(), "java");

JavaInterface 為js 調(diào)用java代碼的接口

public class JavaInterface{
public void showVideoTips(String videoUrl){
//這里我們彈出一個(gè)dialog 提示用戶
}
public void isADUrl(String videoUrl){
//記錄當(dāng)前時(shí)候是廣告地址
}}

接下來(lái)我們就應(yīng)該考慮怎么去查找當(dāng)前網(wǎng)頁(yè)的有效播放地址

   mWebView.loadUrl("javascript:
var vs = document.getElementsByTagName('video');"
+ "if(vs == undefined) {return;}
var v = vs[0];
if(v != undefined){
var vurl = v.src;
window.java.showVideoTips(vurl);
}else{
window.java.showVideoTips(''); }                                                  ");

案例2這個(gè)獲取視頻其實(shí)是不太規(guī)范的，一般的視頻網(wǎng)站都會(huì)在正片前有廣告對(duì)不對(duì)，那廣告你還告訴用戶說(shuō)來(lái)體驗(yàn)體驗(yàn)我們的播放器吧，用戶一看，我靠讓我體驗(yàn)廣告來(lái)了，說(shuō)不定分分鐘卸載了。那我們來(lái)看看怎么去過(guò)濾廣告

String js = "javascript: var v=document.getElementsByTagName('video')[0]; if(v!=undefined){
var vurl = v.src;
if(v.duration == 1|| v.duration > " + webSiteAD.len+ "){     window.LetvFish.getPlayUrl(vurl);
}else{
Window.java.isADUrl(vurl);
}
}else{
window.java.showVideoTips(''); }                                                                          ";
mWebView.loadUrl(js);

總體步驟就變成在獲取視頻的時(shí)候看一下這個(gè)視頻的長(zhǎng)度，如果視頻長(zhǎng)度過(guò)短，就說(shuō)明這個(gè)視頻可能就是一個(gè)廣告，那像這樣的話，我們就需要重新去獲取視頻

1.3. WebView中userAgent的妙用

1.3.1. 模擬桌面版瀏覽器

mWebView.setUserAgent(“Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36”);

設(shè)置過(guò)后userAgent再次訪問(wèn)效果就變成了桌面版頁(yè)面了

1.3.2. 取消WebView與默認(rèn)APP之間的跳轉(zhuǎn)

鳳凰網(wǎng)修改 useragent 中 Linux 字符防止鳳凰網(wǎng)判斷 useragent 后視圖啟動(dòng)自己app 造成跳轉(zhuǎn)失敗。因?yàn)椴⒉皇撬械木W(wǎng)頁(yè)都會(huì)跳轉(zhuǎn)到自己的APP,所以我們要記錄一下默認(rèn)的userAgent，然后在不需要更改userAgent的時(shí)候還原

//更改鳳凰網(wǎng)userAgent防止到app的跳轉(zhuǎn)
WebSettings setting = mWebView.getSettings();
String user_agent = setting.getUserAgentString();
setting.setUserAgentString(user_agent.replace("Linux", ""));

// 保存 useragent 鳳凰網(wǎng)訪問(wèn)需要特殊處理 useragent 非鳳凰網(wǎng)還原useragent
if (defaultUserAgent == null) {
defaultUserAgent = mWebView.getSettings().getUserAgentString();
}

//在不需要更改useragent的時(shí)候還原
if (defaultUserAgent != null) { WebView.getSettings().setUserAgentString(defaultUserAgent);
}

本文版權(quán)歸黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院
首發(fā)：http://android.itheima.com