登录 注册

WebView 使用详解（三）——WebChromeClient 与 LoadData 补充

本贴最后更新于 2246 天前，其中的信息可能已经时异事殊

一、WebChromeClient

1、概述

(1)、 与 WebViewClient 的区别

很多同学一看到这里有 Chrome，立马就会想到 google 的 Chrome 浏览器；这里并不是指 Chrome 浏览器的意思，而是泛指浏览器，WebView 的内部实现并不是完全使用 Chrome 的内核，而是部分使用 Chome 内核，其它都是与 Chrome 不相同的；
我们再来对比下 WebViewClient:

  • WebViewClient:在影响 View 的事件到来时，会通过 WebViewClient 中的方法回调通知用户
  • WebChromeClient：当影响浏览器的事件到来时，就会通过 WebChromeClient 中的方法回调通知用法。

通过上面的对比，我们发现 WebViewClient 和 WebChromeClient 都是针对不同事件的回调，而 google 将这些回调进行分类集合，就产生了 WebViewClient、WebChromeClient 这两个大类，其中管理着针对不同类型的回调而已。

（2）、为什么叫 WebChromeClient？

因为 WebChromeClient 中集合了影响浏览器的事件到来时的回调方法，所以这里更需要突出浏览器的概念，而 Chrome 则是 google 自家的浏览器名称，所以使用 WebChromeClient 来做为名称吧，纯属臆想……

（3）、WebChromeClient 的常用函数

我们先来看一下，在 WebChromeClient 中我们将要讲解的函数，其实 WebChromeClient 里的函数是非常多的，可以监控到浏览器的很多方面，这里我们就不再一个个来讲了，只讲解常用的几个函数，而且随着 ReactNative 和 Hybird 的普及，WebView 的使用场景会越来越少，指不定哪一天就被废弃了

/**
 * 当网页调用alert()来弹出alert弹出框前回调，用以拦截alert()函数
 */
public boolean onJsAlert(WebView view, String url, String message,JsResult result)
/**
 * 当网页调用confirm()来弹出confirm弹出框前回调，用以拦截confirm()函数
 */
public boolean onJsConfirm(WebView view, String url, String message,JsResult result)
/**
 * 当网页调用prompt()来弹出prompt弹出框前回调，用以拦截prompt()函数
 */
 public boolean onJsPrompt(WebView view, String url, String message,String defaultValue, JsPromptResult result) 
 /**
 * 打印 console 信息
 */
 public boolean onConsoleMessage(ConsoleMessage consoleMessage)
 /**
 * 通知程序当前页面加载进度
 */
 public void onProgressChanged(WebView view, int newProgress)

2、WebChromeClient 之 onJsAlert、onJsConfirm、onJsPrompt

这一小节我们把这三个函数一起看，因为他们都是为了处理弹出框。

（1）、为何 JS 中的 alert()、confirm()、prompt()无效

首先，我们来举个例子，在网页中加上按钮，在点击时分别调用 alert()、confirm()、prompt()来弹出不同的对话框
web.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="h">欢迎光临启舰的blog</h1>
    <button onclick="confirm('傻叉')">confirm</button>
    <button onclick="alert('傻叉')">alert</button>
    <button onclick="prompt('傻叉')">prompt</button>
</body>
</html>

然后是 Java 处理代码：（MyActivity.java）

public class MyActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.loadUrl("file:///android_asset/web.html");
    }
}

效果图如下：

从效果图中，虽然启用了 JavaScript 但是在网页中的 confrim()、alert()、prompt()却是没有效果！
这是因为我们需要设置 WebChromClient!
在程序中，我们只需要加上 mWebView.setWebChromeClient(new WebChromeClient()); 就可以实现 confrim()、alert()、prompt()的弹出效果了
html 代码不变，我们来看一下 JAVA 代码：

public class MyActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient());

        mWebView.loadUrl("file:///android_asset/web.html");
    }
}

相比上面，只多了一句：mWebView.setWebChromeClient(new WebChromeClient());
现在再来看下效果图：

至于为什么会这样，我也不知道，也没仔细去研究它的源码，记住就好了。

（2）、使用 onJsAlert 拦截 alert()函数概述

我们先来看一下在程序中如何来做的：

public class MyActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Toast.makeText(MyActivity.this,"xxx",Toast.LENGTH_SHORT).show();
                result.confirm();
                return true;
            }
        });

        mWebView.loadUrl("file:///android_asset/web.html");
    }
}

效果图如下：
我们在重写 onJsAlert 中，在 onJsAlert 代码中写了三句话：

Toast.makeText(MyActivity.this,"xxx",Toast.LENGTH_SHORT).show();
result.confirm();
return true;

这三句话，句句非常重要：
第一句：

Toast.makeText(MyActivity.this,"xxx",Toast.LENGTH_SHORT).show();

表示我们拦截 html 中 alert 函数之后，我们自己的操作，这里是弹出一行 toast
第二句：

result.confirm();

这句话非常重要，它表示向 WebView 通知操作结果，JsResult 有两个函数：JsResult.confirm()和 JsResult.cancel()，JsResult.confirm()表示点击了弹出框的确定按钮，JsResult.cancel()则表示点击了弹出框的取消按钮。
如果没有使用 JsResult 来告诉 WebView 处理结果，则 WebView 就会认为这个弹出框还一直弹在那里，你再点击 alert 按钮，将会无效；
第三句：

return true;

表示告诉 WebView 我们已经拦截了 alert()函数，不需要再弹出网页中的 alert 弹出框了，如果我们 return false,那么 WebView 就会认为我们没有拦截 alert()函数，会继续弹出 alert 对话框。

（3）、如果 onJsAlert 没有使用 JsResult 确认结果

如果我们把 result.confirm()去掉，来看一下，是不是真的像我们说的那样再次点击 alert 按钮会失效

public class MyActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Toast.makeText(MyActivity.this,"xxx",Toast.LENGTH_SHORT).show();
//                result.confirm();
                return true;
            }
        });

        mWebView.loadUrl("file:///android_asset/web.html");
    }
}

我们把上面代码中的 result.confirm()给注掉一下，看下效果：

从效果图中可以看到，在去掉 result.confirm()以后，只有第一次有效果，后面再点击 alert 按钮就无效了（动画中看不出来点击效果，其实我一直在点……）。

（4）、如果 onJsAlert 中 return false 会怎样

前面我们也讲到，如果在 onJsAlert 中 return true，则表示告诉 WebView 我们已经拦截了 alert 函数，系统不需要再弹出 alert 对话框了，如果 return false，则表示告诉 WebView 我们没有拦截 alert 函数，使用系统的默认处理，从 WebChromeClient 的源码中可以看到 onJsAlert 默认是 return false 的。

public boolean onJsAlert(WebView view, String url, String message,JsResult result) {
    return false;
}

下面我们就来看看如何我们在弹出 toast 以后 return false，系统是不是真的还会弹出 alert 对话框

public class MyActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Toast.makeText(MyActivity.this,"xxx",Toast.LENGTH_SHORT).show();
                result.confirm();
                return false;
            }
        });

        mWebView.loadUrl("file:///android_asset/web.html");
    }
}

效果图如下：

从效果图中也明显看出了我们的结论是正确的，当 return false 时，不管我们前面做了什么，依然会弹出对话框。

好了，有关 onJsAlert 我们总结一下：

  • 如果需要使网页中的 confrim()、alert()、prompt()函数生效，需要设置 WebChromeClient！
  • 在使用 onJsAlert 来拦截 alert 对话框时，如果不需要再弹出 alert 对话框，一定要 return true;在 return false 以后，会依然调用系统的默认处理来弹出对话框的
  • 如果我们 return true,则需要在处理完成以后调用 JsResult.confirm()或者 JsResult.cancel()来告诉 WebView 我们点中哪个按钮来取消程序对话框。否则再次点击按钮将会失败

可能有些同学不知道 confrim(),prompt()的对话框效果，下面就整体给大家演示一下 html 中原生的效果。

有关 confrim()和 prompt()的拦截，我们就不再讲了，与拦截 alert()一样！

3、WebChromeClient 之 onConsoleMessage

当 html 中调用 console 相关输出的时候，就会通过 onConsoleMessage 进行通知

public boolean onConsoleMessage(ConsoleMessage consoleMessage)

参数意义：

  • ConsoleMessage consoleMessage:保存着当前消息的类型和消息内容
  • 返回值：如果返回 true 时，就表示拦截了 console 输出，系统就不再通过 console 输出出来了，如果返回 false 则表示没有拦截 console 输出，调用系统默认处理。

我们来看下正常情况下，console 输出的内容及用法
先来看 html 内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="h">欢迎光临启舰的blog</h1>
    <button onclick="confirm('傻叉')">confirm</button>
    <button onclick="alert('傻叉')">alert</button>
    <button onclick="prompt('傻叉')">prompt</button>
    <button onclick="log()">log</button>
</body>
<script type="text/javascript">
function log(){
  console.log("console.log");
  console.warn("warnning");
  console.error("error");
}
</script>
</html>

对应的 java 代码如下：

public class MyActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());

        mWebView.loadUrl("file:///android_asset/web.html");
    }
}

除了 alert,prompt,confirm 以外，其它时候都不需要强制设置 WebChromeClient
当点击 log 按钮时，会调用 console 的函数把 log 输出出来
效果图如下：

在我们 logcat 中也可以看到如下日志：

示例：拦截 Console,弹出消息

下面我们就重写 WebChromeClient 的 onConsoleMessage 方法，把 console 消息拦截掉，然后把消息利用 toast 弹出来：

mWebView.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Toast.makeText(MyActivity.this,consoleMessage.message(),Toast.LENGTH_SHORT).show();
        return  true;
    }

});

效果图如下：

由于我们 return true,控制台将不会再看到我们的消息日志了。

4、WebChromeClient 之 onProgressChanged

表示当前页面的加载速度，函数声明如下：

public void onProgressChanged(WebView view, int newProgress)
  • WebView view:当前 WebView 实例
  • int newProgress：当前的加载进度，值从 0 到 100

比如我们加载“http://blog.csdn.net/harvic880925”
然后把加载进度用日志打出来：

public class MyActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                Log.e("qijian","progress:"+newProgress);
                super.onProgressChanged(view, newProgress);
            }
        });

        mWebView.loadUrl("http://blog.csdn.net/harvic880925");
    }
}

日志如下：

大家一定要注意，底层实现时，是利用 handler 来定时轮循当前进度的，每隔一定时间查询一次，所以每次拿到的进度数据是不一样的，也就是说如果页面较简单，可能会直接返回 100，而跳过中间的各个数据。也就是说，除了 100，其它任何一个数值不是一定返回的，所以大家如果要用到进度除了数值 100 可以用等号来判断，其它一定要用大于号或小于号，如果用了等号，可能永远也不会执行到！

5、WebChromeClient 之其它函数

WebChromeClient 除了上面几个常用函数以后，还有其它一些函数，下面就简单列举一下，就不再一一举例了

/*
* 通知页面标题变化
*/
nReceivedTitle(WebView view, String title)

/*
* 通知当前页面网站新图标
*/
onReceivedIcon(WebView view, Bitmap icon)

/*
* 通知主程序图标按钮URL
*/
onReceivedTouchIconUrl(WebView view, String url, boolean precomposed)

/*
* 通知主程序当前页面将要显示指定方向的View，该方法用来全屏播放视频。
*/
public interface CustomViewCallback {
       // 通知当前页面自定义的View被关闭
       public void onCustomViewHidden();
   }
onShowCustomView(View view, CustomViewCallback callback)

/*
* 与onShowCustomView对应，通知主程序当前页面将要关闭Custom View
*/
onHideCustomView()

/**
 * 请求主程序创建一个新的Window，如果主程序接收请求，返回true并创建一个新的WebView来装载Window，然后添加到View中，发送带有创建的WebView作为参数的resultMsg的给Target。如果主程序拒绝接收请求，则方法返回false。默认不做任何处理，返回false
 */
onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg)

/*
* 显示当前WebView，为当前WebView获取焦点。
*/
onRequestFocus(WebView view)

/*
* 通知主程序关闭WebView，并从View中移除，WebCore停止任何的进行中的加载和JS功能。
*/
onCloseWindow(WebView window)

/**
 * 告诉客户端显示离开当前页面的导航提示框。如果返回true，由客户端处理确认提示框，调用合适的JsResult方法。如果返回false，则返回默认值true给javascript接受离开当前页面的导航。默认：false。JsResult设置false，当前页面取消导航提示，否则离开当前页面。
 */
onJsBeforeUnload(WebView view, String url, String message, JsResult result)

/**
 *通知主程序web内容尝试使用定位API，但是没有相关的权限。主程序需要调用调用指定的定位权限申请的回调。更多说明查看GeolocationPermissions相关API。
 */
onGeolocationPermissionsShowPrompt(String origin,GeolocationPermissions.Callback callback)

/*
 * 通知程序有定位权限请求。如果onGeolocationPermissionsShowPrompt权限申请操作被取消，则隐藏相关的UI界面。
 */
onGeolocationPermissionsHidePrompt()

/**
*通知主程序web内容尝试申请指定资源的权限（权限没有授权或已拒绝），主程序必须调用PermissionRequest#grant(String[])或PermissionRequest#deny()。如果没有覆写该方法，默认拒绝。
*/
onPermissionRequest(PermissionRequest request)

/**
* 通知主程序相关权限被取消。任何相关UI都应该隐藏掉。
*/
onPermissionRequestCanceled(PermissionRequest request)

/**
* 通知主程序 执行的Js操作超时。客户端决定是否中断JavaScript继续执行。如果客户端返回true，JavaScript中断执行。如果客户端返回false，则执行继续。注意：如果继续执行，重置JavaScript超时计时器。如果Js下一次检查点仍没有结束，则再次提示。
*/
onJsTimeout()

/**
*当停止播放，Video显示为一张图片。默认图片可以通过HTML的Video的poster属性标签来指定。如果poster属性不存在，则使用默认的poster。该方法允许ChromeClient提供默认图片。
*/
getDefaultVideoPoster()

/**
* 当用户重放视频，在渲染第一帧前需要花费时间去缓冲足够的数据。在缓冲期间，ChromeClient可以提供一个显示的View。如：可以显示一个加载动画。
*/
getVideoLoadingProgressView()

/**
* 获取访问历史Item，用于链接颜色。
*/
getVisitedHistory(ValueCallback callback)

/**
* 通知客户端显示文件选择器。用来处理file类型的HTML标签，响应用户点击选择文件的按钮操作。调用filePathCallback.onReceiveValue(null)并返回true取消请求操作。
* FileChooserParams参数的枚举列表：
MODE_OPEN 打开
MODE_OPEN_MULTIPLE 选中多个文件打开
MODE_OPEN_FOLDER 打开文件夹（暂不支持）
MODE_SAVE 保存
*/
onShowFileChooser(WebView webView, ValueCallback filePathCallback,FileChooserParams fileChooserParams)

/**
* 解析文件选择Activity返回的结果。需要和createIntent一起使用。
*/
parseResult(int resultCode, Intent data)

/**
* 创建Intent对象来启动文件选择器。Intent支持可访问的简单类型文件资源。不支持高级文件资源如live media capture媒体快照。如果需要访问这些资源或其他高级文件类型资源可以自己创建Intent对象。
*/
createIntent()

/**
* 返回文件选择模式
*/
getMode()

/**
* 返回可访问MIME类型数组，如audio/*，如果没有指定可访问类型，数组返回为null
*/
getAcceptTypes()

/**
* 返回优先的媒体快照类型值如Camera、Microphone。true：允许快照。false，禁止快照。使用getAcceptTypes方法确定合适的capture设备。
*/
isCaptureEnabled()

/**
* 返回文件选择器的标题。如果为null，使用默认名称。
*/
getTitle()

/**
*指定默认选中的文件名或为null
*/
getFilenameHint()

二、LoadData()与 loadDataWithBaseURL()

在第一篇中，我们就已经讲了通过 loadUrl()来加载本地页面和在线地址的方式，这里给大家再补充两个方法 LoadData()与 loadDataWithBaseURL()，它们不是用来加载整个页面文件的，而是用来加载一段代码片的。这两个函数平时用的比较少，这里只讲基本用法，就不再深入了。
声明方式为：

public void loadData(String data, String mimeType, String encoding)
public void loadDataWithBaseURL(String baseUrl, String data,String mimeType, String encoding, String historyUrl)

这里每个参数的具体意义后面再详细讲解，这里涉及到 MIME 类型，我以前有篇文章讲过，大家可以参考下：《 ContentProvider 数据库共享之——MIME 类型与 getType()》
简单来讲，MIME 的类型格式是跟文件的后缀相关联的，比如下面的几个关联方式：

文件后缀 MIME 类型
html text/html
jpg image/jpeg
bmp image/bmp
png image/png

这里仅涉及到网页和图片的类型，还有其它的文件后缀和对应的 MIME 类型，这里就不再一一列举了，有关 MIME 类型的具体意义大家可以参考上面的文章。

1、loadData

示例 1：简单使用

我们先来看看 loadData 是如何使用的，它的声明如下：

public void loadData(String data, String mimeType, String encoding)
  • String data：代码片段内容
  • String mimeType：代码片段所对应的 MIME 类型，如果传 null，则默认为 text/html
  • String encoding：代码片段的编码方式

我们先举个例子来看下：

public class MyActivity extends Activity {
    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");

        String summary = "<html><body>You scored <b>192</b> points.</body></html>";
        mWebView.loadData(summary, "text/html", "utf-8");

    }
}

效果图为：

这段代码很简单，就不再讲了。

示例 2：loadData 的正确使用方式

在使用 loadData 时，在数据里面不能出现英文字符：’#’, ‘%’, ‘\’ , ‘?’ 这四个字符，如果有的话可以用 %23, %25, %27, %3f，这些字符来替换，在平时测试时，你的数据时，你的数据里含有这些字符，但不会出问题，当出问题时，你可以替换下。
直接使用这四个字符会造成的问题如下：

  • %：会报找不到页面错误，页面全是乱码。
  • #，会让你的 goBack 失效，但 canGoBAck 是可以使用的。于是就会产生返回按钮生效，但不能返回的情况。
  • \ 和? 我在转换时，会报错，因为它会把\当作转义符来使用，如果用两级转义，也不生效，我是对它无语了。

我们虽然可以把代码中的字符逐个读取，然后给转换掉，但运行速度上会大打折扣，因为 webview.loadData()是运行在主线程的，所以如果你的代码段很长，那就会卡死主线程！所以 Android 给我们提供了一个专门用来转码的函数：URLEncoder.encode(String s, String charsetName) ,它能将冲突的字符进行转义，然后再传给 webview，这样 webview 在加载时就不会有冲突了,encode 函数的声明如下：

public static String encode(String s, String charsetName);
  • String s:代码段
  • String charsetName：编码类型

下面我们来看使用这个 encode 函数的例子：

public class MyActivity extends Activity {
    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");

        try {
            String summary = "<html><body>You scored <b>192</b> points.</body></html>";
            mWebView.loadData(URLEncoder.encode(summary, "utf-8"), "text/html", "utf-8");
        } catch (Exception e) {
            Log.e("qijian", e.getMessage());
        }
    }
}

data 中，有人会遇到中文乱码问题，解决办法：参数传”utf-8”，页面的编码格式也必须是 utf-8，这样编码统一就不会乱了。别的编码我也没有试过。

注意：
1、loadData()应该是不能加载图片的，反正我是加载不出来，加载图片的内容我们后面会使用 loadDataWithBaseURL 来实现。
2、为了防止字符冲突，在传递 loadData 的数据时，必须使用 URLEncoder.encode()函数来转义
3、页面的编码格式必须与代码中传参的编码格式一致，不然会导致乱码

2、loadDataWithBaseURL

相比 loadData，这个函数更常用，因为 loadData 能实现的功能，它都能实现，而且也不会出现字符冲突。其函数声明如下：

public void loadDataWithBaseURL(String baseUrl, String data,String mimeType, String encoding, String historyUrl)

参数意义如下：

  • String baseUrl：基准 URL，不需要可以传 null，它的意思是，如果 data 中的 url 是相对地址，则就会加上基准 url 来拼接出完整的地址，比如 baseUrl 是 http://img6.ph.126.net，data 中有个 Img 标签，它的内容是：``，很明显 src 的地址不是本地地址也不是在线地址，那它就是一个相对地址，所以加上 baseUrl 以后才是它的完整地址：http://img6.ph.126.net/hBiG96B8egigBULxUWcOpA==/109212290980771276.jpg
  • String mimeType:MIME 类型
  • String encoding：编码方式
  • String historyUrl：当前的历史记录所要存储的值。如果不需要可以传 Null，loadDataWithBaseURL 它本身并不会向历史记录中存储数据，要想实现历史记录，需要我们自己来实现；有关历史记录的实现方式是比较复杂的，历史记录是以 Key/value 的方式存储在一个 historyList 里的，当前进后退时，会用 Key 来取出对应的 value 值来加载进 webview 中。而 Key 就是这里的 baseUrl,Value 就是这里的 historyUrl；history 所指向的必须是一个页面，并且页面存在于 SD 卡中或程序中（assets）；

下面我们举个例子来看下 baseUrl 的概念：

示例 1：baseUrl 的用法

public class MyActivity extends Activity {
    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");

        String baseURL = "http://img6.ph.126.net";
        String data = "漂亮MM <img src='hBiG96B8egigBULxUWcOpA==/109212290980771276.jpg'>";
        mWebView.loadDataWithBaseURL(baseURL, data, "text/html", "utf-8", null);
    }
}

效果图如下：

示例 2：三种地址加载情况

我们再进阶一下，看如果网页地址是绝对地址，本地文件地址也是绝对地址，而另外一个是相对地址的情况下，看 baseUrl 是如何操作的

public class MyActivity extends Activity {
    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");

        String baseURL = "http://img6.ph.126.net";
        String data = "绝对网页地址:" +
                "<img src='http://img3.3lian.com/2013/v8/72/d/61.jpg'>" +
                "本地地址:" +
                "<img src='file:///android_asset/s07.jpg'>" +
                "相对地址:" +
                "<img src='hBiG96B8egigBULxUWcOpA==/109212290980771276.jpg'>";

        mWebView.loadDataWithBaseURL(baseURL, data, "text/html", "utf-8", null);

    }
}

效果图如下：

在代码中有三种地址：第一个是绝对的 http 地址，第二个是通过 file 指定的本地地址，对于这两类的绝对地址，baseUrl 是不起作用的，而对于第三个相对地址，是会启用 baseUrl 的来拼接完整地址的。

总结：

  • 面这两种方法，我建议使用后者，虽然 loadData 的历史记录不需要我们自己来实现，但在使用时，这就两个加载上后者比前者快一到两倍。
  • 另外 loadData 不能加载图片，而 loadDataWithBaseURL 是可以加载图片的

好了，这篇就到这里了,有关 WebView 系列就先到这了，下篇继续写自定义控件……
源码在文章底部给出

  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    333 引用 • 323 回帖 • 65 关注
  • Webview
    7 引用 • 33 回帖 • 1 关注
徐州 位置
1.0k 3 285 148 17 169 43 363

相关帖子

回帖
WebView 使用详解（三）——WebChromeClient 与 LoadData 补充

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
quanguanzhou
徐州
回帖
0
 帖子
12
 积分
555