Question

在我的网站中嵌入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（fuction（）{}）;包含一些用于更改css的jQuery，但这也失败了。

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

Answer 1

！重要的是你的CSS应该覆盖小部件中使用的CSS。

Answer 2

要设置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');
});

Answer 3

Google corsproxy。当CORS阻止它时，它可用于访问iframe。无论如何，它相当于一个黑客而不是一个解决方案，它可能在你的情况下不起作用

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

3 个答案: