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

Is it possible to style the content of a cross-domain iframe?

本文关键字：样式 iframe 设置 是否      更新时间：2023-09-26

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

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

Google corsproxy。当 CORS 阻止它时，它可用于访问 iframe。无论如何，它更像是一种黑客而不是解决方案，它可能不适用于您的情况

对于设置iframe的样式，您需要首先使用内容方法。它可以在加载 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');
});
相关文章：