如何在UCI风格下的CRM表单字段后面插入icon图片

问题:需要向客户实体的name字段后加上一个Icon图标,并且加入点击事件,打算表单Onload事件触发时直接操作DOM元素,但是在UCI风格下的CRM表单,Onload事件执行完成之前获取不到元素

思路:延迟JS执行,直至Html元素出现Crm中

解决方法:在onload方法里面调用异步function:waitForElementsToExist,在指定时间内,不断尝试获取指定元素,获取之后再回调方法插入相应的html

代码如下:

复制代码
function onload() {
    waitForElementsToExist(['id-8448b78f-8f42-454e-8e2a-f8196b0419af-1-name8'], () => btn_opensearch(), { checkFrequency: 1000, timeout: 5000 });
}
function btn_opensearch() {
    console.log("測試");
    try {
        var clienturl = rtcrm.getClientUrl()
        var imgurl = clienturl + "/WebResources/new_/imgs/ribbon/new_pulish32.png"
        var father = parent.document.getElementById("id-8448b78f-8f42-454e-8e2a-f8196b0419af-1-name8")
        if (!father) {
            father = document.getElementById("id-8448b78f-8f42-454e-8e2a-f8196b0419af-1-name8")
        }
        var child = parent.document.createElement("div")
        if (!child) {
            child = document.createElement("div")
        }
        child.addEventListener("click", searchaccount)

        child.innerHTML =
            "<img style='right:16px;bottom:2px;' src='" +
            imgurl +
            "'  alt=''>"
        father.appendChild(child)
    } catch (e) { }
}
function searchaccount() {

    alert("显示信息");
}

async function waitForElementsToExist(elementIds, callback, options) {

    options = Object.assign({
        checkFrequency: 500,
        timeout: null,
    }, options);

    let intervalHandle = setInterval(() => {
        let doElementsExist = true;
        for (let elementId of elementIds) {
            let element = window.top.document.getElementById(elementId);
            if (!element) {
                doElementsExist = false;
                break;
            }
        }

        if (doElementsExist) {
            console.log("找到元素");
            clearInterval(intervalHandle);
            if (callback) {
                console.log("回调");
                callback();
            }

        }

    }, options.checkFrequency);

    if (options.timeout != null) {
        setTimeout(() => clearInterval(intervalHandle), options.timeout);
    }

}
复制代码

最终效果:

 

posted @   西伯利亚小菜鸟  阅读(55)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示