是否可以為跨域iframe的內容設置樣式？

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之后的！important應該覆蓋小部件中使用的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。 無論如何，這不是解決方案，而是解決方法，在您的情況下可能不起作用