- 重点1:loadUrl及loadDataWithBaseURL的使用
这部分内容已经在 UI组件——WebView部分api释义 讲过了,还不懂得可以去看一下
- 重点2:h5页面在Android WebView中的适配问题
笔者踩过的坑是h5页面未对移动端做任何适配,而且在h5页面指定了,导致Android端适配很差,我们Android端在这里自己搞各种适配的工作,结果还是不理想,其实这个问题理想解决方法是:h5页面要尽量使用百分比布局,比如指定width:100%,那么就能解决多数问题,但是还有一类问题无法解决,h5页面中的有些文本在移动端显示的特别小,如果想要正常显示,那么在h5的中添加 name=”viewport” content=”width=device-width”来解决;具体为
- 重点3:对加载网页时出现的失败网页的处理
通常情况下,WebView加载网页如果出现错误,那么错误提示便是网页本身的错误提示,这对用户来说很不友好,因此,为了给客户良好的体验感,我们会把原生的错误提示页面替换为一个比较友好的提示页面,具体是什么页面可以找设计。要替换原生的错误页面,我们就要知道当页面发生错误时会回调什么方法,然后我们在那里做拦截处理,便可以成功替换页面了。当加载错误时会回调onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)和onReceivedHttpError( WebView view, WebResourceRequest request, WebResourceResponse errorResponse),因此我们在这里做替换就可以了。注意,第一个方法要求api 23,要做一些适配工作,比如,我们可以判断版本>23时用第一个方法,其他情况下用这个方法:onReceivedError(WebView view, int errorCode,String description, String failingUrl)。
- 重点4:与js交互
这是WebView的重中之重,分两个方向讲1:Android调用js,2:js调用Android
- 1:Android调用js
android 调用js又分为两种情况,一种是无返回值的调用,一种是有返回值的调用。无论哪种情况都需要添加webSettings.setJavaScriptEnabled(true);否则不会生效
- a:无返回值的交互
Android调用js无需返回值时直接使用:webview.loadUrl(str);str是需要执行的js语句,UI组件——WebView部分api释义 这里已经讲过了。 - b:有返回值的调用
Android调用js有返回值的方法是在Android4.4(api 19)以后新增的方法:evaluateJavascript(String script, ValueCallback resultCallback);script是即将执行的js语句,resultCallback是执行结果的回调
- a:无返回值的交互
- 2:js调用Android
首先:Android需要提供可调用的方法,这里以获取html的宽度为例:
- 1:Android调用js
//通过与js交互来获取HTML的宽度
class JavaScriptToAndroid {
@JavascriptInterface//必须要记得加上
public void getWidth(String value) {
if (value != null) {
int width = Integer.parseInt(value);
Toast.makeText(WebViewActivity.this, "width of html is: " + width + "px", Toast.LENGTH_SHORT).show();
}
}
}
然后设置
settings.setJavaScriptEnabled(true);
并将该类注入到js中,并以Android作为调用的标识
webView.addJavascriptInterface(new JavaScriptToAndroid(), "Android");
最后在html中调用这个方法,html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width: 100%;
height:500px;
background: pink;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box">
<p>
<input type="button" id="enter" value="调用Android" onclick="testClick();"/>
</p>
</div>
</body>
<script>
function testClick(){
window.Android.getWidth(document.getElementsByClassName("box")[0].offsetWidth)
}
</script>
</html>
至此,交互结束
重点5:埋下的坑
- 坑1:安全问题
webView 在api 4.0 到4.2 之间增加了 searchBoxJavaBridge_ 方法,导致webView 存在安全漏洞解决方法是:在4.2 以前的版本不用 addJavascriptInterface 接口,并且在4.0-4.2之间移除searchBoxJavaBridge方法 —>我也是google来的,并未遇到
public class MyWebView extends WebView{ public MyWebView(Context context) { super(context); removeSearchBoxJavaBridgeInterface(); } public MyWebView(Context context, AttributeSet attrs) { super(context, attrs); removeSearchBoxJavaBridgeInterface(); } public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); removeSearchBoxJavaBridgeInterface(); } public MyWebView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); removeSearchBoxJavaBridgeInterface(); } private void removeSearchBoxJavaBridgeInterface() { if (Build.VERSION.SDK_INT >= 14 && Build.VERSION.SDK_INT < 17) { removeJavascriptInterface("searchBoxJavaBridge_"); } } @Override public void addJavascriptInterface(Object object, String name) { if (Build.VERSION.SDK_INT >= 17) { super.addJavascriptInterface(object, name); } } }
- 坑2:内存泄漏问题
@Override protected void onDestroy() { super.onDestroy(); if (mMyWebView != null) { mMyWebView.stopLoading(); mMyWebView.getSettings().setJavaScriptEnabled(false); ViewGroup parent = (ViewGroup) mMyWebView.getParent(); parent.removeAllViews();//ViewGroup中的方法 try { mMyWebView.destroy();//销毁WebView } catch (Exception e) { e.printStackTrace(); } } }
- 坑3:执行js脚本偶发性失败(尚未解决)
- 坑1:安全问题