webview中HTML5页面显示内网内容和图片

nandy007
   2015-12-09 16:26:12发布  2016-12-17 10:56:30更新 3收藏, 3396浏览
WebAPP技术
0

ExMobi中的webview对html的处理本质上是交给浏览器去做的,所以ExMobi客户端与服务端的会话以及服务端与第三方业务系统的会话在浏览器中的标准语法是无法存在的,比如html中的a的href、标准ajax请求、img的src地址、script的src地址、link的href等。

所以,如果原本显示的内容是经过UIXML请求来的,那么在html中显示的内容如果需要再次请求,则也需要使用ExMobi的请求类去访问

ExMobi的异步请求类请参考http://bbs.exmobi.cn/thread-3293-1-1.html


那本帖就以Ajax类为例,讲解如何在html中加载img地址显示。可以先下载示例代码如下:

h5handleimg.zip(0.18M 下载次数:381) h5handleimg.zip(0.18M 下载次数:381)

对于img的处理,我们采用了img元素支持base64的特性:

也就是说,我们一般设置img的src是一个url地址,浏览器会去向url请求图片字节流来显示这个图片。

而在webview里的html里如果设置了一个内网的url是无法显示的,所以我们需要拿到这个地址到ExMobi的服务端去请求图片字节流并转为base64编码,重新设置img的src为base64编码内容即可显示图片实体。


OK,那接下来,我们就以http://www.csdn.net/article/2015 ... -Native-with-ExMobi此新闻内容为例,通过base64方式重新显示其内部的图片。


首先,我们需要从新闻地址请求到新闻内容:

$(document).on('plusready', function(){
                                        w.doShowDetail = function(data){
                                                var obj = eval('(' data.responseText ')');
                                                var title = obj.title;
                                                var content = obj.content;
                                                //这里得到的内容中的img的src属性已经被转换为data-source
                                                $('body').html(title content);
                                                //此方法是解析img的data-source属性得到内网地址,通过ajax请求返回base64重新设置给img的src
                                                doLoadImg();
                                        };
                                        w.doFail = function(){
                                                //alert('请求错误');
                                        };
                                        var postData = {
                                                "source" : "http://www.csdn.net/article/2015-11-27/2826345-compare-React-Native-with-ExMobi"
                                        };
                                        //先获取实际的新闻内容,内容来源于postData中的source
                                        var ajax = new Ajax({
                                                url : 'http://demo/news.jsp',
                                                method : 'post',
                                                data : ClientUtil.jsonToString(postData),//将实际地址作为json参数提交
                                                requestHeader : {'Content-Type' : 'application/json'},
                                                successFunction : 'doShowDetail',
                                                failFunction : 'doFail'
                                        });
                                        ajax.send();
                                });

我们使用了Ajax类来请求新闻内容,请求的news.jsp代码如下:

<%-- ExMobi JSP文件,注释和取消快捷键统一为Ctrl / 多行注释为Ctrl Shift / --%>
<%@ page language="java" import="java.util.*"
 contentType="application/uixml xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/client/adapt.jsp"%>
<%
JSONObject reqObj = new JSONObject(aa.req.getContent());
String url = (String)reqObj.get("source");
%>
<aa:http id="news" url="<%=url %>" method="get">
</aa:http>
<%
JSONObject resultObj = new JSONObject();
resultObj.put("title", aa.xpath.copyOfNodeAsStr("//h1[@class='title']", "news"));
String content = aa.xpath.copyOfNodeAsStr("//div[contains(@class, 'news_content')]", "news");
//正则替换img的src属性为data-source,因为内网的url地址在webview上是无法访问,需要再次经过服务端请求
content = content.replaceAll("src", "data-source");
resultObj.put("content", content);
out.println(resultObj.toString());
%>

我们注意这里的一个处理细节,我们把内容中的所有src属性改成了data-source名称,主要是避免img元素加载的时候去请求地址,所以转换了一下。

我们在回调函数中解析出此响应json数据的内容,并添加到body元素中进行显示

然后调用doLoadImg函数遍历所有的img元素,解析出data-source重新发起Ajax请求到jsp中:

var doLoadImg = function(){
                                        var _cache = {
                                                "index" : 0
                                        };
                                        w.setSource = function(ajax){
                                                //从ajax缓存中获取索引
                                                var index = ajax.getStringData('index');
                                                var $obj = _cache[index];//得到当前ajax对应操作的img DOM对象
                                                //此时ajax返回的内容为img支持的base64编码写法,直接设置给src显示
                                                $obj.attr('src', ajax.responseText);
                                                delete _cache[index];//清除索引缓存
                                        };
                                        //遍历所有的img元素
                                        $('img').each(function(){
                                                //得到在服务端设置的img的data-source属性,也就是实际img的src地址
                                                var source = $(this).data('source');
                                                var postData = {
                                                        "source" : source
                                                };
                                                var ajax = new Ajax({
                                                        url : 'http://demo/getImgBase64.jsp',
                                                        method : 'post',
                                                        data : ClientUtil.jsonToString(postData),//将实际地址作为json参数提交
                                                        requestHeader : {'Content-Type' : 'application/json'},
                                                        successFunction : 'setSource',
                                                        failFunction : 'doFail'
                                                });
                                                //将当前操作的图片对象缓存到ajax类中,可以在回调中获取,为了区别不同的回调,使用了索引
                                                var index = _cache.index  ;
                                                _cache[index] = $(this);
                                                ajax.setStringData('index', index);
                                                ajax.send();
                                        });
                                };

这里处理的jsp叫getImgBase64.jsp,其主要是从图片url中请求到图片字节流并转为base64编码:

<%-- ExMobi JSP文件,注释和取消快捷键统一为Ctrl / 多行注释为Ctrl Shift / --%>
<%@ page language="java" import="java.util.*"
 contentType="application/uixml xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/client/adapt.jsp"%>
<%
JSONObject reqObj = new JSONObject(aa.req.getContent());
String url = (String)reqObj.get("source");
%>
<aa:http id="img" url="<%=url %>" method="get"></aa:http>
<%
byte body[] = aa.rsp.getAttachBody("img");
sun.misc.BASE64Encoder encode =  new sun.misc.BASE64Encoder();
//将图片转成img元素支持的base64写法
String base64 = encode.encode(body); 
%>
<%="data:image/png;base64," base64%>

在回调函数中,我们得到img的base64编码并重新设置到img的src中,就可以显示图片了


h5handleimg.zip

下载APP
扫码下载栗子社区APP