自定义外部嵌入小部件

Question

我一直在尝试在我的网站上从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规则？

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

Answer 1

尝试一下。

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