如何覆盖Zendesk外部嵌入iframe组件的原有CSS规则

1. 是否可以覆盖外部嵌入组件的原有CSS规则？ #

可以，但是必须满足同源策略前提：嵌入的iframe的协议、域名、端口和你自有站点的三者完全一致。如果是跨域的iframe，浏览器的同源安全限制会禁止父页面操作iframe内部的DOM和样式，这种场景下无法直接通过父页面的CSS/JS修改内部样式。

2. 当前操作失效的原因 #

你当前的代码存在三个典型问题：

• 选择器作用范围错误：document.querySelector查询的是父页面的DOM树，iframe是独立的内嵌文档，内部节点不属于父页面的DOM树，直接查询必然返回空值，后续样式设置自然不会生效。
• 没有等待iframe加载完成就执行操作：就算你正确指向了iframe内部文档，要是执行代码时iframe还没完成加载、内部节点还没渲染，也会找不到目标元素。
• （核心原因）跨域限制：Zendesk官方嵌入脚本生成的iframe域名属于Zendesk，和你的站点域名不一致，属于跨域场景，浏览器会直接拦截你对iframe内部文档的访问请求，这也是你所有修改尝试都不生效的根本原因。

同源场景下操作iframe内部元素的正确示例代码 #

// 先替换为你页面中iframe的实际选择器
const zendeskIframe = document.querySelector('.zendesk-embed-iframe');
zendeskIframe.onload = function() {
  // 获取iframe内部文档对象
  const innerDoc = zendeskIframe.contentDocument || zendeskIframe.contentWindow.document;
  const targetEle = innerDoc.querySelector('#iframe-main-container');
  if (targetEle) {
    targetEle.style.background = 'red';
    // 也可以动态插入样式表批量修改内部样式
    const customStyle = innerDoc.createElement('style');
    customStyle.textContent = `
      /* 你要覆盖的自定义CSS规则 */
      .form-input {border-radius: 4px;}
    `;
    innerDoc.head.appendChild(customStyle);
  }
}

跨域场景下的可行解决方案 #

如果无法满足同源要求，可以尝试两种路径：

• 配置Zendesk的嵌入域名白名单，将嵌入iframe的域名绑定为你站点的子域名，满足同源要求后即可正常修改
• 查询Zendesk嵌入组件的官方客户端API，确认是否支持通过postMessage通信的方式传递自定义样式配置

内容的提问来源于stack exchange，提问作者Maluco