Android使用http协议加载本地html

释放双眼,带上耳机,听听看~!

背景

在我们项目开发的时候,遇上了这样的一个场景,处于安全性和性能的考虑,在某个webview中加载的html页面,需要从 原来的远端加载,变成本地加载。原本以为这是一件非常简单的事情,只是将远程的html地址换成html代码文件,放入到资源里面。然后通过本地file协议直接加载就可以了。但事情并不如想象中那么顺利。

image-20180829092853635.png

原本能够在远端运行的代码,不能够运行了,这是令人匪夷所思的问题。所以,今天我们就来分享一下解决该问题的方法和过程

分析过程

首先,作为程序猿,我们最常见的方式就是看源码,现在转战源码:

<script type="text/javascript" crossorigin src="https://****/log/log.js"></script>
...
<script type="text/javascript" crossorigin src="https://image.xxxx.cn/xxxx/xxxx_344a60b.js"></script>

代码我只选择了关键的部分,也隐藏了一些项目数据。我们可以从错误信息和源码里面看出了引发错误的地方。在与引入的资源无法找到,ERR_FILE_NOT_FOUND,查看到相关资源的源码,标明了src

这里的src并没有使用绝对url,而是使用了相对路径。省略了schema(协议)。而html会为这些资源的url补充上缺失的部分。这里甚至可以把host省略,而webview会自动补充schema和host。这个自动补全功能对于前端开发来说是一件好事,这样在迁移代码的时候,不需要做绝对路径的更改。但是在我们的远端加载切换到本地加载的时候,就会出问题。上述的//image.xxxx.cn/xxxx/xxxx_344a60b.js在原本的远端加载时会被补充为http://image.xxxx.cn/xxxx/xxxx_344a60b.js,但是如果是本地加载,就会自动补充file:///image.xxxxxx.cn/xx/xxxx_344a60b.js,在本地根本没有这个文件,自然加载失败了。

解决方案

1.相对链改绝对链接:在一开始,我们的思维非常惯性,既然说html的资源相对链接是不能使用的,那么我们前端开发只要将所有的相对url改成绝对url就可以了。简单写了一个demo测试后,可行。

但是在项目中,总是有一些磕磕碰碰的事情发生。我们的前端除了自身资源以外,还引入了别的组件(公司其他部门开发的),无法修改源码,所以第一个方法暂时不适用。所以我们就想到了第二种方式,前端开发基本无须改动的方式。

2.本地使用http或其他协议形式加载本地html:在Android里面,我们的webview不仅仅只有loadUrl这个接口让我们来加载网页。这也是我们本次的解决方式。首先我们来看这个方法的签名:

/**
* Loads the given data into this WebView, using baseUrl as the base URL for
* the content. The base URL is used both to resolve relative URLs and when
* applying JavaScript's same origin policy. The historyUrl is used for the
* history entry.
* <p>
* Note that content specified in this way can access local device files
* (via 'file' scheme URLs) only if baseUrl specifies a scheme other than
* 'http', 'https', 'ftp', 'ftps', 'about' or 'javascript'.
* <p>
* If the base URL uses the data scheme, this method is equivalent to
* calling {@link #loadData(String,String,String) loadData()} and the
* historyUrl is ignored, and the data will be treated as part of a data: URL.
* If the base URL uses any other scheme, then the data will be loaded into
* the WebView as a plain string (i.e. not part of a data URL) and any URL-encoded
* entities in the string will not be decoded.
* <p>
* Note that the baseUrl is sent in the 'Referer' HTTP header when
* requesting subresources (images, etc.) of the page loaded using this method.
*
* @param baseUrl the URL to use as the page's base URL. If null defaults to
*                'about:blank'.
* @param data a String of data in the given encoding
* @param mimeType the MIMEType of the data, e.g. 'text/html'. If null,
*                 defaults to 'text/html'.
* @param encoding the encoding of the data
* @param historyUrl the URL to use as the history entry. If null defaults
*                   to 'about:blank'. If non-null, this must be a valid URL.
*/
public void loadDataWithBaseURL(String baseUrl, String data,
String mimeType, String encoding, String historyUrl)

其中第一个入参baseUrl比较关键,根据注释的说法,使用baseUrl作为基础URL。这个基础URL是可以使得加载js和其他相关URL使用相同的策略,同时意味着可以使用以下的schema:’http’, ‘https’, ‘ftp’, ‘ftps’, ‘about’ or ‘javascript’ 。那么正好满足了现在的需求。同时,如果需要在URL里面加入请求参数,也能在这个参数内不齐。
第二个入参data就是我们的html内容,直接通过读取文件的方式生成String字符串即可。
第三个参数mimeType实际上和http请求的Content-Type具有相同作用,通常填写text/html即可。
第四个参数encoding顾名思义,就是填写整个html的编码格式
第五个参数historyUrl用于给前端加入history参数。

实现代码

如果对于本地加载的html,不需要关注host,那么直接使用localhost即可:

webview.loadDataWithBaseURL("http://localhost", htmlData , "text/html","UTF-8", null);

基本能够完美实现以http形式加载本地的页面。
唯一能看出区别的,只有在使用inspect的时候的URL不是传入的baseUrl

image.png

人已赞赏
Android文章

Android Https详解+wireshark抓包演示

2020-1-9 10:28:54

Android文章

Androidx-fragment1.1.0版本实现懒加载

2020-1-9 11:06:22

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索