Android WebView 在开发过程中都有哪些坑

Posted 2023-03-21

自android 4.4起，引入了webView，使用需要注意的事项：
1.多线程
如果你在子线程中调用WebView的相关方法，而不在UI线程，则可能会出现无法预料的错误。
所以，当你的程序中需要用到多线程时候，也请使用 runOnUiThread()方法来保证你关于WebView的操作是在UI线程中进行的：
runOnUiThread(newRunnable()
@Override
publicvoid run()
// Code for WebView goes here

);

2.线程阻塞
永远不要阻塞UI线程，这是开发Android程序的一个真理。虽然是真理，我们却往往不自觉的犯一些错误违背它，一个开发中常犯的错误就是：在UI线程中去等待javascript 的回调。
例如：
// This code is BAD and will block the UI thread
webView.loadUrl("javascript:fn()"); while(result ==null)
Thread.sleep(100);

千万不要这样做，Android 4.4中，提供了新的Api来做这件事情。 evaluateJavascript() 就是专门来异步执行JavaScript代码的。
3.evaluateJavascript() 方法
专门用于异步调用JavaScript方法，并且能够得到一个回调结果。
示例：
mWebView.evaluateJavascript(script, new ValueCallback<String>()
@Override
public void onReceiveValue(String value)
//TODO

);

4.处理 WebView 中 url 跳转
新版WebView对于自定义scheme的url跳转，新增了更为严格的限制条件。 当你实现了 shouldOverrideUrlLoading() 或 shouldInterceptRequest() 回调，WebView 也只会在跳转url是合法Url时才会跳转。
例如，如果你使用这样一个url ：
<ahref="showProfile"]]>Show Profile</a>

shouldOverrideUrlLoading() 将不会被调用。
正确的使用方式是：
<ahref="example-app:showProfile"]]>Show Profile</a>

对应的检测Url跳转的方式：
// The URL scheme should be non-hierarchical (no trailing slashes)
privatestaticfinalString APP_SCHEME ="example-app:";

@Override publicboolean shouldOverrideUrlLoading(WebView view,String
url)
if(url.startsWith(APP_SCHEME))
urlData =URLDecoder.decode(url.substring(APP_SCHEME.length()),"UTF-8");
respondToData(urlData);
returntrue;

returnfalse;

当然，也可以这样使用：
webView.loadDataWithBaseURL("example-app://example.co.uk/", html_DATA,
null,"UTF-8",null);

5.UserAgent 变化
如果你的App对应的服务端程序，会根据客户端传来的UserAgent来做不同的事情，那么你需要注意的是，新版本的WebView中，UserAgent有了些微妙的改变：
Mozilla/5.0 (Linux; Android 4.4; Nexus 4 Build/KRT16H)
AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0
Mobile Safari/537.36

使用 getDefaultUserAgent()方法可以获取默认的UserAgent，也可以通过：
mWebView.getSettings().setUserAgentString(ua);
mWebView.getSettings().getUserAgentString();

来设置和获取自定义的UserAgent。
6.使用addJavascriptInterface()的注意事项
从Android4.2开始。 只有添加 @JavascriptInterface 声明的Java方法才可以被JavaScript调用，例如：
class JsObject
@JavascriptInterface
public String toString() return "injectedObject";

webView.addJavascriptInterface(new JsObject(), "injectedObject");
webView.loadData("", "text/html", null);
webView.loadUrl("javascript:alert(injectedObject.toString())");

7.Remote Debugging
新版的WebView还提供了一个很厉害的功能：使用Chrome来调试你运行在WebView中的程序。 参考技术A WebView：
（一）、介绍：
android提供了一个内置浏览器，该浏览器可以查看网站，查看邮件，播放视频。要使用该内置浏览器，要通过WebView组件实现。webView组件式专门用来浏览网页的。
类结构：
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.AbsoluteLayout
↳ android.webkit.WebView

（二）、webview组件常用方法：
loadUrl()
loadData()
loadDataWithBaseURL()
capturePicture()
goBack()
goForward()
stopLoading()
reload()
（三）、WebView组件显示url页面的内容：
1、基本代码：
webView_main = (WebView) findViewById(R.id.webView_main);
webView_main.loadUrl("http://www.qq.com");

（四）、WebView组件加载html代码：
1、基本代码：
webView_main = (WebView) findViewById(R.id.webView_main);
// webView_main.loadData(data, "text/html","utf-8");//这个方法中虽然设置了字符集，但是运行效果中发现依然中文会显示乱码。为了解决这个问题，建议使用loadDataWithBaseURL()方法。
webView_main.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);

【备注：】MIME【了解】
概念：MIME意为多功能Internet邮件扩展，它设计的最初目的是为了在发送 电子邮件时附加多媒体数据，让邮件客户程序能根据其类型进行处理。然而当它被HTTP协议支持之后，它的意义就更为显著了。它使得HTTP传输的不仅是普通的文本，而变得丰富多彩。
每个MIME类型由两部分组成，前面是数据的大类别，例如声音audio、图象image等，后面定义具体的种类。
常见的MIME类型(通用型)：
超文本标记语言文本 .html text/html
xml文档 .xml text/xml
XHTML文档 .xhtml application/xhtml+xml
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
PDF文档 .pdf application/pdf
Microsoft Word文件 .word application/msword
PNG图像 .png image/png
GIF图形 .gif image/gif
JPEG图形 .jpeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
任意的二进制数据 application/octet-stream
2、如果加载的html代码中包含javascript语言，会如何呢？

运行后发现，所有的javascript都不会执行。因为WebView 在默认情况下不支持javascript。如何让执行javascript呢？
让WebView支持javascript的两个步骤：
使用 WebView 组件的WebSettings对象的setJavaScriptEnabled()方法。这种做法是让 WebView 能支持绝大多数的javascript语言。但是依然不支持alert等警告对话框语句。
使用 WebView 组件的setWebChromeClient()方法。这种做法是让 WebView 也支持显示alert等警告对话框。
基本代码：

webView_main.getSettings().setJavaScriptEnabled(true);// 支持运行javascript

webView_main.setWebChromeClient(new WebChromeClient());// 支持运行特殊的javascript（例如：alert()）

webView_main.setWebViewClient(new WebViewClient());// 当点击超链地址后不会新打开浏览器来访问，而是始终在本app中浏览页面

3、如果html中包含有超级链接地址，WebView能顺利执行吗？
经过运行后发现，WebView中的超链地址在点击后，会跳出该应用程序，而弹出新的浏览器去访问该网页。
如果解决呢？调用webview对象的setWebViewClient()方法即可解决。
webView_main.setWebViewClient(new WebViewClient());
（五）、用WebView实现“网页版天气预告”

【备注：】调用页面地址：http://m.weather.com.cn/m/pn12/weather.htm?id=101010100T
webView_main = (WebView) findViewById(R.id.webView_main);
webView_main.getSettings().setJavaScriptEnabled(true);
webView_main.setWebChromeClient(new WebChromeClient());
webView_main.setWebViewClient(new WebViewClient());
webView_main.loadUrl("http://m.weather.com.cn/m/pn12/weather.htm?id=101010100T");
（六）、制作简单的网页浏览器：
1、核心代码：
publicclass MainActivity extends Activity
privateEditText editText_main_url;
privateWebView webView_main;
private String url = "";
@Override
protectedvoid onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
editText_main_url = (EditText) findViewById(R.id.editText_main_url);
webView_main = (WebView) findViewById(R.id.webView_main);
// 让webview对象支持解析javascript语句
webView_main.getSettings().setJavaScriptEnabled(true);
// 让webview对象支持解析alert()等特殊的javascript语句
webView_main.setWebChromeClient(new WebChromeClient());
// 如果不使用该句代码，在点击超链地址后，会跳出程序，而弹出浏览器访问网页。
webView_main.setWebViewClient(new WebViewClient());

publicvoid clickButton(View view)
switch (view.getId())
// 浏览器中后退键监听
caseR.id.button_main_goback:
webView_main.goBack();
break;
// 浏览器前进键监听
caseR.id.button_main_goforward:
webView_main.goForward();
break;
// 当输入网址后，点击该按钮，可以执行访问
caseR.id.button_main_submit:
url = editText_main_url.getText().toString();
if ((url == null) || url.equals(""))
Toast.makeText(MainActivity.this, "请输入url地址！", Toast.LENGTH_LONG).show();
else
if (url.indexOf("http://") != 0)
url = "http://" + url;

webView_main.loadUrl(url);

break;
// 浏览器停止加载键监听
caseR.id.button_main_stop:
webView_main.stopLoading();
break;
// 浏览器刷新键监听
default:
break;


本回答被提问者采纳

Android WebView开发问题及优化汇总

我们在native与网页相结合开发的过程中，难免会遇到关于WebView一些共通的问题。就我目前开发过程中遇到的问题以及最后得到的优化方案都将在这里列举出来。有些是老生常谈，有些则是个人摸索得出解决方法。下面就是整理得到的些干货。

1.加快HTML网页装载完成的速度

默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但如果在这之前也有解析到image节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求就会造成带宽紧张，影响到css或js文件加载完成的时间，造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片，等页面finish后再发起图片加载。

故在WebView初始化时设置如下代码：

1 2 3 4 5 6 7

public void int () { if(Build.VERSION.SDK_INT >= 19) { webView.getSettings().setLoadsImagesAutomatically(true); } else { webView.getSettings().setLoadsImagesAutomatically(false); } }

同时在WebView的WebViewClient实例中的onPageFinished()方法添加如下代码：

1 2 3 4 5 6

@Override public void onPageFinished(WebView view, String url) { if(!webView.getSettings().getLoadsImagesAutomatically()) { webView.getSettings().setLoadsImagesAutomatically(true); } }

从上面的代码，可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时，会只有一个image标签得到加载，因而对于这样的系统我们就先直接加载。

2.自定义出错界面

当WebView加载页面出错时（一般为404 NOT FOUND），安卓WebView会默认显示一个卖萌的出错界面。但我们怎么能让用户发现原来我使用的是网页应用呢，我们期望的是用户在网页上得到是如原生般应用的体验，那就先要从干掉这个默认出错页面开始。当WebView加载出错时，我们会在WebViewClient实例中的onReceivedError()方法接收到错误，我们就在这里做些手脚：

1 2 3 4 5 6

@Override public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) { super.onReceivedError(view, errorCode, description, failingUrl); loadDataWithBaseURL(null, "", "text/html", "utf-8", null); mErrorFrame.setVisibility(View.VISIBLE); }

从上面可以看出，我们先使用loadDataWithBaseURL清除掉默认错误页内容，再让我们自定义的View得到显示（mErrorFrame为蒙在WebView之上的一个LinearLayout布局，默认为View.GONE）。

3.是否存在滚动条

当我们做类似上拉加载下一页这样的功能的时候，页面初始的时候需要知道当前WebView是否存在纵向滚动条，如果有则不加载下一页，如果没有则加载下一页直到其出现纵向滚动条。首先继承WebView类，在子类添加下面的代码：

1 2 3

public boolean existVerticalScrollbar () { return computeVerticalScrollRange() > computeVerticalScrollExtent(); }

computeVerticalScrollRange得到的是可滑动的最大高度，computeVerticalScrollExtent得到的是滚动把手自身的高，当不存在滚动条时，两者的值是相等的。当有滚动条时前者一定是大于后者的。

4.是否已滚动到页面底部

同样我们在做上拉加载下一页这样的功能时，也需要知道当前页面滚动条所处的状态，如果快到底部，则要发起网络请求数据更新网页。同样继承WebView类，在子类覆盖onScrollChanged方法，具体如下：

1 2 3 4 5 6 7 8 9 10 11 12

@Override protected void onScrollChanged(int newX, int newY, int oldX, int oldY) { super.onScrollChanged(newX, newY, oldX, oldY); if (newY != oldY) { float contentHeight = getContentHeight() * getScale(); // 当前内容高度下从未触发过, 浏览器存在滚动条且滑动到将抵底部位置 if (mCurrContentHeight != contentHeight && newY > 0 && contentHeight <= newY + getHeight() + mThreshold) { // TODO Something... mCurrContentHeight = contentHeight; } } }

上面mCurrContentHeight用于记录上次触发时的网页高度，用来防止在网页总高度未发生变化而目标区域发生连续滚动时会多次触发TODO，mThreshold是一个阈值，当页面底部距离滚动条底部的高度差<=这个值时会触发TODO。

5.远程网页需访问本地资源

当我们在WebView中加载出从web服务器上拿取的内容时，是无法访问本地资源的，如assets目录下的图片资源，因为这样的行为属于跨域行为（Cross-Domain），而WebView是禁止的。解决这个问题的方案是把html内容先下载到本地，然后使用loadDataWithBaseURL加载html。这样就可以在html中使用 file:///android_asset/xxx.png 的链接来引用包里面assets下的资源了。示例如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

private void loadWithAccessLocal(final String htmlUrl) { new Thread(new Runnable() { public void run() { try { final String htmlStr = NetService.fetchHtml(htmlUrl); if (htmlStr != null) { TaskExecutor.runTaskOnUiThread(new Runnable() { @Override public void run() { loadDataWithBaseURL(htmlUrl, htmlStr, "text/html", "UTF-8", ""); } }); return; } } catch (Exception e) { Log.e("Exception:" + e.getMessage()); }   TaskExecutor.runTaskOnUiThread(new Runnable() { @Override public void run() { onPageLoadedError(-1, "fetch html failed"); } }); } }).start(); }

上面有几点需要注意：

• 从网络上下载html的过程应放在工作线程中
• html下载成功后渲染出html的步骤应放在UI主线程，不然WebView会报错
• html下载失败则可以使用我们前面讲述的方法来显示自定义错误界面
  
  完整的demo项目代码我已放到：http://yunpan.cn/cgQPvJQxxkCBj （提取码：6712）。

6.ViewPager里非首屏WebView点击事件不响应

如果你的多个WebView是放在ViewPager里一个个加载出来的，那么就会遇到这样的问题。ViewPager首屏WebView的创建是在前台，点击时没有问题；而其他非首屏的WebView是在后台创建，滑动到它后点击页面会出现如下错误日志：

20955-20968/xx.xxx.xxx E/webcoreglue﹕ Should not happen: no rect-based-test nodes found

解决这个问题的办法是继承WebView类，在子类覆盖onTouchEvent方法，填入如下代码：

1 2 3 4 5 6 7

@Override public boolean onTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_DOWN) { onScrollChanged(getScrollX(), getScrollY(), getScrollX(), getScrollY()); } return super.onTouchEvent(ev); }

该方法的最先提出在WebView in ViewPager not receive user inputs。

7.WebView硬件加速导致页面渲染闪烁

4.0以上的系统我们开启硬件加速后，WebView渲染页面更加快速，拖动也更加顺滑。但有个副作用就是，当WebView视图被整体遮住一块，然后突然恢复时（比如使用SlideMenu将WebView从侧边滑出来时），这个过渡期会出现白块同时界面闪烁。解决这个问题的方法是在过渡期前将WebView的硬件加速临时关闭，过渡期后再开启，代码如下：

1 2 3

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null); }

8.避免addJavaScriptInterface带来的安全问题

使用开源项目Safe Java-JS WebView Bridge可以很好替代addJavaScriptInterface方法，同时增加了异步回调等支持，并且不存在了安全风险。

9.WebView与上层父元素的TouchMove事件冲突

在开发过程中你可能会遇到这样一种情况。端里面使用ViewPager嵌套了多个WebView页面，同时某一个WebView中的页面元素需要响应TouchMove事件。详细解决方案请移步：http://www.pedant.cn/2014/09/23/webview-touch-conflict

欢迎转载，请注明出处链接！！！

来自：http://www.pedant.cn/2014/09/10/webview-optimize-points/