webview无法加载data-src资源

最近做的项目内容数据是爬去的其他资源,服务器给过来的都是页面代码。要求正常展示页面内容,同时点击页面图片进入大图模式。

实际开发中:

webview使用loadDataWithBaseURL(null,str,"text/html","utf-8","")发现无法加载该页面代码内的图片。loadData()也是无效的,然后去问了下h5开发的同事发现他们是可以正常加载的,ios也是。那么好了 问题只可能是我们这边。通过排查 发现了一个问题,服务器给过来的代码内图片标签是这样的:

<img data-type="gif" data-src="http://../1d04dd19a3760dd462172c5bbf57b3c.gif" data-copyright="0" style="" data-ratio="0.5625" data-w="400"></p><p>

这里加载图片用了data-src,也就是懒加载的方式加载的,测试发现webview无法加载data-src,换成src资源的时候是可以完美加载的。发现了问题所在就好解决了。为了正常展示 首先我们通过正则匹配到每个img标签下的data-src这一字符串存放于数组:

webview无法加载data-src资源

可以看到 做了一个筛选,原因是 页面内可能存在iframe视频,为了满足点击现实大图模式而提前做的准备工作。

如果只是为了解决图片不加载问题

data.replace("data-src","src");

替换掉data-src就好了。

在已经取到了接受点击事件的图片源以后,我们需要加上一段js注入,为了提供响应:

webview无法加载data-src资源

我这里首先取到了img标签的点击事件,然后通过判断当前img标签是否是iframe,如果是那么不调用native交互,如果不是那么传给native做相应的大图响应。