0

将 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 的可靠方法？

4

3 回答 3

-1

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

于 2014-11-20T11:35:09.193 回答
-1

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

于 2014-11-20T11:18:10.973 回答
-1

对于 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');
});
于 2017-07-30T09:06:10.820 回答