自定义外部嵌入小部件答案

【问题标题】：Customizing external embed widget自定义外部嵌入小部件
【发布时间】：2021-12-29 13:24:54
【问题描述】：

我一直在尝试在我的网站上自定义 Zendesk 的嵌入式小部件。由于他们没有提供任何自定义表单外观的选项，因此我想强制执行我的 css 规则。

我从 Zendesk 添加了这段代码，以便在我的页面上显示它们的表单。

<script type="text/javascript" src="https://leads-capturer.futuresimple.com/embed.js?token=ca98908sdgfgds9834234jlkjsdb">

此脚本在<iframe> 中放置一个表单，并且此<iframe> 中的所有节点都无法自定义/更改。

我尝试 JS 设置内联样式来形成<iframe> 内的元素。尝试创建一个新样式表来覆盖其原始样式表，但似乎没有任何效果。

即使是像下面这段代码这样简单的事情，也会失败（#iframe-main-container 是来自<iframe> 的孩子）：

<script>
    let p = document.querySelector('#iframe-main-container');
    p.style.background = 'red';
</script>

如果我更改上面的代码并定位<iframe>，它就可以工作。

我的第一个问题是，是否可以从嵌入式小部件覆盖现有的 CSS 规则？

如果可以的话，我是不是做错了什么来改变它的外观？

【问题讨论】：

标签： javascript css styles zendesk

【解决方案1】：

试试这个。

  <script>
    let iframe = document.getElementsByTagName("iframe");
    let p = iframe[0].contentWindow.document.getElementById('#iframe-main-container');
    p.style.background = 'red';
  </script>

【讨论】：

感谢您的帮助@Rob Moll 您建议的代码为该选择器返回“未定义”。我相信这个脚本是在 DOM 准备好之前执行的。我在这里尝试了一些技巧，例如：' $(document).ready(function() { console.log($('#iframe-main-container').css('padding-bottom')); }) ;'另一次尝试是在 5 秒后执行 setTimeout 函数以从 #iframe-main-container 读取 css 值，但我总是将“未定义”作为其值。有什么想法吗？