xiaochengxu/static/app-plus/mp-html/js/handler.js

'use strict'

// 等待初始化完毕
document.addEventListener('UniAppJSBridgeReady', () => {
    document.body.onclick = function () {
        return uni.postMessage({
            data: {
                action: 'onClick'
            }
        })
    }

    uni.postMessage({
        data: {
            action: 'onJSBridgeReady'
        }
    })
})
let options
let medias = []
/**
 * @description 获取标签的所有属性
 * @param {Element} ele
 */

function getAttrs(ele) {
    const attrs = Object.create(null)

    for (let i = ele.attributes.length; i--;) {
        attrs[ele.attributes[i].name] = ele.attributes[i].value
    }

    return attrs
}
/**
 * @description 图片加载出错
 */

function onImgError() {
    if (options[1]) {
        this.src = options[1]
        this.onerror = null
    } // 取消监听点击

    this.onclick = null
    this.ontouchstart = null
    uni.postMessage({
        data: {
            action: 'onError',
            source: 'img',
            attrs: getAttrs(this)
        }
    })
}
/**
 * @description 创建 dom 结构
 * @param {object[]} nodes 节点数组
 * @param {Element} parent 父节点
 * @param {string} namespace 命名空间
 */

function createDom(nodes, parent, namespace) {
    const _loop = function _loop(i) {
        const node = nodes[i]
        let ele = void 0

        if (!node.type || node.type == 'node') {
            let { name } = node // svg 需要设置 namespace

            if (name == 'svg') namespace = 'http://www.w3.org/2000/svg'
            if (name == 'html' || name == 'body') name = 'div' // 创建标签

            if (!namespace) ele = document.createElement(name); else ele = document.createElementNS(namespace, name) // 设置属性

            for (const item in node.attrs) {
                ele.setAttribute(item, node.attrs[item])
            } // 递归创建子节点

            if (node.children) createDom(node.children, ele, namespace) // 处理图片

            if (name == 'img') {
                if (!ele.src && ele.getAttribute('data-src')) ele.src = ele.getAttribute('data-src')

                if (!node.attrs.ignore) {
                    // 监听图片点击事件
                    ele.onclick = function (e) {
                        e.stopPropagation()
                        uni.postMessage({
                            data: {
                                action: 'onImgTap',
                                attrs: getAttrs(this)
                            }
                        })
                    }
                }

                if (options[2]) {
                    image = new Image()
                    image.src = ele.src
                    ele.src = options[2]

                    image.onload = function () {
                        ele.src = this.src
                    }

                    image.onerror = function () {
                        ele.onerror()
                    }
                }

                ele.onerror = onImgError
            } // 处理链接
            else if (name == 'a') {
                ele.addEventListener('click', function (e) {
                    e.stopPropagation()
                    e.preventDefault() // 阻止默认跳转

                    const href = this.getAttribute('href')
                    let offset
                    if (href && href[0] == '#') offset = (document.getElementById(href.substr(1)) || {}).offsetTop
                    uni.postMessage({
                        data: {
                            action: 'onLinkTap',
                            attrs: getAttrs(this),
                            offset
                        }
                    })
                }, true)
            } // 处理音视频
            else if (name == 'video' || name == 'audio') {
                medias.push(ele)

                if (!node.attrs.autoplay) {
                    if (!node.attrs.controls) ele.setAttribute('controls', 'true') // 空白图占位

                    if (!node.attrs.poster) ele.setAttribute('poster', "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>")
                }

                if (options[3]) {
                    ele.onplay = function () {
                        for (let _i = 0; _i < medias.length; _i++) {
                            if (medias[_i] != this) medias[_i].pause()
                        }
                    }
                }

                ele.onerror = function () {
                    uni.postMessage({
                        data: {
                            action: 'onError',
                            source: name,
                            attrs: getAttrs(this)
                        }
                    })
                }
            } // 处理表格
            else if (name == 'table' && options[4] && !ele.style.cssText.includes('inline')) {
                const div = document.createElement('div')
                div.style.overflow = 'auto'
                div.appendChild(ele)
                ele = div
            } else if (name == 'svg') namespace = void 0
        } else ele = document.createTextNode(node.text.replace(/&amp;/g, '&'))

        parent.appendChild(ele)
    }

    for (let i = 0; i < nodes.length; i++) {
        var image

        _loop(i)
    }
} // 设置 html 内容

window.setContent = function (nodes, opts, append) {
    const ele = document.getElementById('content') // 背景颜色

    if (opts[0]) document.body.bgColor = opts[0] // 长按复制

    if (!opts[5]) ele.style.userSelect = 'none'

    if (!append) {
        ele.innerHTML = '' // 不追加则先清空

        medias = []
    }

    options = opts
    const fragment = document.createDocumentFragment()
    createDom(nodes, fragment)
    ele.appendChild(fragment) // 触发事件

    let height = ele.scrollHeight
    uni.postMessage({
        data: {
            action: 'onLoad',
            height
        }
    })
    clearInterval(window.timer)
    let ready = false
    window.timer = setInterval(() => {
        if (ele.scrollHeight != height) {
            height = ele.scrollHeight
            uni.postMessage({
                data: {
                    action: 'onHeightChange',
                    height
                }
            })
        } else if (!ready) {
            ready = true
            uni.postMessage({
                data: {
                    action: 'onReady'
                }
            })
        }
    }, 350)
} // 回收计时器

window.onunload = function () {
    clearInterval(window.timer)
}