简体   繁体   中英

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

When embedding a Kickstarter widget into my website, I would like to style the widget to match my site better. You can find the embed code if you visit a Kickstarter project page and click the "embed" link below the featured image/video. Here's an example of one you can use for testing:

<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>

Obviously I can change the width and height right in the html iframe tag, but when I try to style anything else on the elements contained within the iframe using CSS, it has no effect. I assume this is because of outside scripts that are dictating the widget's style upon creation, because if I edit the css after the page has loaded through the browser, the effects are registered correctly. I have tried using the jQuery function $(document).ready(fuction(){}); to include some jQuery for changing the css, but this has failed as well.

EDIT: After doing some more reading, it seems that the issue at hand is that cross-domain iframes really don't like being told what to do. I read several answers and it seems everyone has a different idea about this. I can't tell if there is or isn't a way to actually do it. Does anyone know a reliable way to access the css of a cross-domain iframe?

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

For styling iframe, you need to use contents method first. It can be used while loading the 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');
});

Google corsproxy. It can be used to have access to iframe when CORS blocks it. Anyway, it rather a hack than a solution and it might not work in your case

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM