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

【问题标题】：Is it possible to style the content of a cross-domain iframe?是否可以为跨域 iframe 的内容设置样式？
【发布时间】：2014-11-20 11:12:00
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery css kickstarter

【解决方案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');
});

【讨论】：