微信小程序里面,对于富文本标签,我们通常使用wxparse这个插件来进行解析,可以说非常的方便。但是今天在使用的时候,遇到了iframe中是视频地址的问题。

如果是标准的视频标签。wxparse是可以正常解析的,但是如果是下面这样的形式的话,小程序是无法显示视频的。

<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="

  • 修改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的模板解析