7.5.6 WebView处理网页返回的错误码信息

本节引言：

如果公司的移动 App 是基于 HTML5 端实现的，也就是通过 WebView 来承载网页内容，那么一旦访问的页面不存在，或者出现其他异常，返回了 404、401、403、30X 这类状态码，直接把 WebView 默认的错误提示页抛给用户，体验往往不算友好。这种情况下，可以通过重写 WebViewClient 的 onReceivedError() 方法，做一层更符合产品风格的错误处理。常见做法通常有两种：一种是在 assets 目录下自定义一个用于展示错误信息的 HTML 页面，当发生错误、也就是 onReceivedError() 被触发时，调用 webView 的 loadUrl 跳转到这个页面，比如：wView.loadUrl("file:///android_asset/error.html"); 另一种则更直接，单独写一个布局，或者干脆准备一张足够醒目的大图，默认先设为不可见，等页面出错时再把这个布局或图片显示出来。下面就用一个简单示例把这个过程走一遍。

1.页面错误，加载自定义网页：

运行效果图：

关键代码：

wView.setWebViewClient(new WebViewClient() {
//设置在webView点击打开的新网页在当前界面显示,而不跳转到新的浏览器中
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return true;
}
@Override
public void onReceivedError(WebView view, int errorCode, String description,
    String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        wView.loadUrl("file:///android_asset/error.html");
    }
});

2.页面错误，显示相应的View

运行效果图：

实现代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private WebView wView;
    private ImageView img_error_back;
    private Button btn_refresh;
@Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        setContentView(R.layout.activity_main);
        wView = (WebView) findViewById(R.id.wView);
        img_error_back = (ImageView) findViewById(R.id.img_error_back);
        btn_refresh = (Button) findViewById(R.id.btn_refresh);
        wView.loadUrl("http://www.baidu.com");
        wView.setWebViewClient(new WebViewClient() {
            //设置在webView点击打开的新网页在当前界面显示,而不跳转到新的浏览器中
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
@Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
                wView.setVisibility(View.GONE);
                img_error_back.setVisibility(View.VISIBLE);
            }
        });
        btn_refresh.setOnClickListener(this);
    }
@Override
    public void onClick(View v) {
        wView.loadUrl("http://www.baidu.com");
        img_error_back.setVisibility(View.GONE);
        wView.setVisibility(View.VISIBLE);
    }
}

3.示例代码下载：

WebViewDemo8.zip：下载 WebViewDemo8.zip

本节小结：

这一小节其实不复杂，算是比较容易上手的一部分。另外，完全可以根据不同的errorCode去匹配不同的页面，这块按实际需求继续扩展就行。至于WebView的基础内容，到这里也就告一段落了。下一节会进入网络编程里一个公认的难点——Socket网络编程。当然，学过的话上手会轻松不少；没接触过也不用紧张，跟着往下看，一样能把Socket这块理顺。照例，还是得配张图才算完整，哈哈。好了，这一段就先到这儿。