修改wxparse中的html2json.js文件,添加对iframe标签的解析。
function html2json(html, bindName) {
HTMLParser(html, {
start: function (tag, attrs, unary) {
...
//对img添加额外数据
if (node.tag === 'img') {
node.imgIndex = results.images.length;
var imgUrl = node.attr.src;
if(!imgUrl) {
return
}
if (imgUrl[0] == '') {
imgUrl.splice(0, 1);
}
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
node.attr.src = imgUrl;
node.from = bindName;
results.images.push(node);
results.imageUrls.push(imgUrl);
}
// 处理iframe的地址
if(node.tag === 'iframe') {
node.src= node.attr.src;
}
.....};
2.在wxParse.wxml添加iframe视频模板
<template name="wxPraseIframe">
<video id="myVideo" src="{{item.src}}" enable-danmu danmu-btn controls></video>
</template>
3.在wxParse.wxml中,对循环模板添加处理。
<!--循环模版-->
<template name="wxParse0">
<!--<template is="wxParse1" data="{{item}}" />-->
<!--判断是否是标签节点-->
<block wx:if="{{item.node == 'element'}}">
<block wx:if="{{item.tag == 'button'}}">
<button type="default" size="mini">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse1" data="{{item}}" />
</block>
</button>
</block>
<!--li类型-->
<block wx:elif="{{item.tag == 'li'}}">
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
<view class="{{item.classStr}} wxParse-li-inner">
<view class="{{item.classStr}} wxParse-li-text">
<view class="{{item.classStr}} wxParse-li-circle"></view>
</view>
<view class="{{item.classStr}} wxParse-li-text">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse1" data="{{item}}" />
</block>
</view>
</view>
</view>
</block>
<!--video类型-->
<block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}" />
</block>
<!--iframe插件(这个是我们添加的)-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
需要注意的是,循环模板可能会有很多个,比如
<template name="wxParse1">
<template name="wxParse2">
我们最好都添加上iframe的模板解析