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

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

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

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

需要在AndroidManifest.xml文件中添加權(quán)限，否則會出現(xiàn)Web page not available錯誤。
<uses-permission android:name="android.permission.INTERNET" />
調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁：
互聯(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)酷/樂視網(wǎng)/鳳凰網(wǎng)
其中以優(yōu)酷網(wǎng)為特殊：在android 4.4 平臺webview 的 chorme內(nèi)核無法解析<a href=”http://xxx” target=”video”> 視頻鏈接</a> 像這個標簽中 target=”video”就是當前版本無法解析的問題，我們應(yīng)該怎么去解決這個問題呢？來分析一下，我們之前遇到的超鏈接都是target=”_blank” 或者”_self” 那么我們是不是應(yīng)該考慮將target 更改為_self 呢。來嘗試一下

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)核將我們知道他們無法解析的屬性給提前解析了。
案例2去除youku 搜庫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類似移動端手機迅雷在當前網(wǎng)頁查找可用視頻地址，查到以后提示用戶使用體驗更佳的播放器進行播放

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

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

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

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

   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這個獲取視頻其實是不太規(guī)范的，一般的視頻網(wǎng)站都會在正片前有廣告對不對，那廣告你還告訴用戶說來體驗體驗我們的播放器吧，用戶一看，我靠讓我體驗廣告來了，說不定分分鐘卸載了。那我們來看看怎么去過濾廣告

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);

總體步驟就變成在獲取視頻的時候看一下這個視頻的長度，如果視頻長度過短，就說明這個視頻可能就是一個廣告，那像這樣的話，我們就需要重新去獲取視頻

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è)置過后userAgent再次訪問效果就變成了桌面版頁面了

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

鳳凰網(wǎng)修改 useragent 中 Linux 字符防止鳳凰網(wǎng)判斷 useragent 后視圖啟動自己app 造成跳轉(zhuǎn)失敗。因為并不是所有的網(wǎng)頁都會跳轉(zhuǎn)到自己的APP,所以我們要記錄一下默認的userAgent，然后在不需要更改userAgent的時候還原

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

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

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

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