如何在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); } }
最终效果: