是否可以为跨域 iframe 的内容设置样式？

Posted 2023-03-15

【中文标题】是否可以为跨域 iframe 的内容设置样式？

【英文标题】：Is it possible to style the content of a cross-domain iframe?

【发布时间】：2014-11-20 11:12:00

【问题描述】：

在将 Kickstarter 小部件嵌入我的网站时，我希望设置小部件的样式以更好地匹配我的网站。如果您访问 Kickstarter 项目页面并单击特色图像/视频下方的“嵌入”链接，您可以找到嵌入代码。下面是一个可用于测试的示例：

<iframe frameborder="0"  scrolling="no" src="https://www.kickstarter.com/projects/1973403569/never-lose-anything-again/widget/card.html?v=2" ></iframe>

显然我可以在 html iframe 标记中更改宽度和高度，但是当我尝试使用 CSS 在 iframe 中包含的元素上设置其他任何样式时，它没有任何效果。我认为这是因为外部脚本在创建时决定了小部件的样式，因为如果我在页面通过浏览器加载后编辑 css，效果就会正确注册。我尝试过使用 jQuery 函数 $(document).ready(fction());包含一些用于更改 css 的 jQuery，但这也失败了。

编辑：在做了更多阅读之后，似乎手头的问题是跨域 iframe 真的不喜欢被告知要做什么。我阅读了几个答案，似乎每个人对此都有不同的想法。我不知道是否有办法实际做到这一点。有谁知道访问跨域 iframe 的 css 的可靠方法吗？

【参考方案1】：

!important 在你的 CSS 之后应该覆盖小部件中使用的 CSS。

【讨论】：

不起作用。 iframe 被视为不同的网站，无法识别全局样式表中的任何内容。

【参考方案2】：

Google 代理服务器。当 CORS 阻止它时，它可用于访问 iframe。无论如何，这与其说是解决方案不如说是一种技巧，而且它可能不适用于您的情况

【参考方案3】：

对于 iframe 的样式，您需要先使用contents 方法。它可以在加载 DOM 时使用。

  $('iframe').on('load', function()
    $('iframe').contents().find('form').attr('target','_blank');
    $('iframe').css('min-height','1px !important;');
    $('iframe').contents().find('form').css('background-color','#f7f7f7 !important;')
    $('iframe').contents().find('form').addClass('awesome');
);