Android+物联网培训之WebView案例分析

更新时间:2017-07-02 来源:黑马程序员Android+物联网培训学院浏览量:

WebView案例分析
WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页。

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

需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。
<uses-permission android:name="android.permission.INTERNET" />
调用WebView的loadUrl()方法，设置WevView要显示的网页：
互联网用：webView.loadUrl("http://www.baidu.com");
本地文件用：webView.loadUrl("file:///android_asset/index.html"); 本地文件存放在：assets文件中

1.1. 在WebView中如何让JS与Java安全地互相调用

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

1.2. JS与Java的互调

1.2.1. Java调用JS

案例1以加载视频聚合类网站为例类似优酷/乐视网/凤凰网
其中以优酷网为特殊：在android 4.4 平台webview 的 chorme内核无法解析<a href=”http://xxx” target=”video”> 视频链接</a> 像这个标签中 target=”video”就是当前版本无法解析的问题，我们应该怎么去解决这个问题呢？来分析一下，我们之前遇到的超链接都是target=”_blank” 或者”_self” 那么我们是不是应该考虑将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代码，那只需要我们调用一下这段js代码就可以将target=”video”更改为target=”_self”.WebView的 loadUrl 就可以直接调用js代码只要在js代码的字符串前添加javascript: 就可以了。这样就帮助了chorme 内核将我们知道他们无法解析的属性给提前解析了。
案例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调用Java

案例1类似移动端手机迅雷在当前网页查找可用视频地址，查到以后提示用户使用体验更佳的播放器进行播放

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

JavaInterface 为js 调用java代码的接口

public class JavaInterface{
public void showVideoTips(String videoUrl){
//这里我们弹出一个dialog 提示用户
}
public void isADUrl(String videoUrl){
//记录当前时候是广告地址
}}

接下来我们就应该考虑怎么去查找当前网页的有效播放地址

   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这个获取视频其实是不太规范的，一般的视频网站都会在正片前有广告对不对，那广告你还告诉用户说来体验体验我们的播放器吧，用户一看，我靠让我体验广告来了，说不定分分钟卸载了。那我们来看看怎么去过滤广告

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

设置过后userAgent再次访问效果就变成了桌面版页面了

1.3.2. 取消WebView与默认APP之间的跳转

凤凰网修改 useragent 中 Linux 字符防止凤凰网判断 useragent 后视图启动自己app 造成跳转失败。因为并不是所有的网页都会跳转到自己的APP,所以我们要记录一下默认的userAgent，然后在不需要更改userAgent的时候还原

//更改凤凰网userAgent防止到app的跳转
WebSettings setting = mWebView.getSettings();
String user_agent = setting.getUserAgentString();
setting.setUserAgentString(user_agent.replace("Linux", ""));

// 保存 useragent 凤凰网访问需要特殊处理 useragent 非凤凰网还原useragent
if (defaultUserAgent == null) {
defaultUserAgent = mWebView.getSettings().getUserAgentString();
}

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

本文版权归黑马程序员Android+物联网培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：黑马程序员Android+物联网培训学院
首发：http://android.itheima.com