如何通过CSS隐藏Zendesk小部件iframe内的指定子元素与字符

安全阿岳

2026-8-30

解决方案

你原有代码存在两处会导致失效的问题：

注入的CSS规则末尾多了多余的逗号，会造成浏览器解析CSS失败，样式完全不生效
仅给父元素设置font-size:0会把所有子元素的文本一并隐藏，没有做精准的规则区分，达不到保留指定内容的需求

由于Zendesk小部件限制iframe内的JS DOM操作，完全可以通过纯CSS注入的方式实现需求，不需要修改任何DOM节点，最终展示效果和你期望的DOM结构完全一致：

利用父元素font-size:0隐藏所有裸文本节点，也就是你需要移除的  ·  分隔符
单独给第一个内容为Kopi Help的span恢复正常字号，保证内容正常展示
给第二个内容为Bot的span设置display:none彻底隐藏
增加iframe加载状态判断，避免iframe未加载完成时注入样式找不到节点报错

可直接使用的代码

const style = document.createElement('style');
style.innerHTML = `
  .eRhaXm {
    text-align: center !important;
    margin-left: 0 !important;
    font-size: 0 !important;
  }
  /* 恢复Kopi Help文本的正常显示 */
  .eRhaXm span:first-child {
    font-size: 14px !important; /* 请根据实际业务需要调整为匹配的字号 */
  }
  /* 隐藏Bot标签 */
  .eRhaXm span:last-child {
    display: none !important;
  }
`;

const webWidget = document.getElementById('webWidget');
if (webWidget) {
  const injectCustomStyle = () => {
    webWidget.contentWindow.document.head.appendChild(style);
  };
  // 监听iframe加载完成后注入
  webWidget.addEventListener('load', injectCustomStyle);
  // 如果iframe已经加载完成，直接注入
  if (webWidget.contentWindow.document.readyState === 'complete') {
    injectCustomStyle();
  }
}