Apply CSS to Iframe Content

Question

I have used below code This is my Iframe:

<iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=50'></iframe>

$('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});

I have also applied Css directly

.pluginButton {
    background: none repeat scroll 0 0 #FF8000 !important;
}

Still it is not working.I want to change pluginButton's background.I want to apply image to its background.How to apply?

You have no control over content from a foreign site due to same origin security — mplungjan, Jan 31 '13 at 05:59
you can only cURL the page with php and then access it but I doubt it would work on facebook — Miro, Jan 31 '13 at 06:01
you can't on a facebook like button... http://stackoverflow.com/questions/5385700/how-to-style-facebook-like-button — Miro, Jan 31 '13 at 06:04

Adil · Answer 1 · 2013-01-31T06:02:15.833

The code of setting the css seems alright semantically as the html is not available to ensure if you correctly used the selectors. You are probably accessing DOM element before they become available. The element of frame may not become ready on document.ready event but on window.load Put the code in window.load to ensure the elements in iframe are available to script.

$(window).load(function){    
    $('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});    
})

score 1 · Accepted Answer · edited May 23 '17 at 12:22

If I understand you correctly, then what you want to do is inject CSS into the iframe which loads a Facebook page.

The short answer is that it is not possible. Here is an answer posted on SO with a more detailed explanation: Can I apply CSS to the elements within an iframe?

No, not from outside the iframe. An is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame.

If the contains content from a different domain, there's pretty much nothing you can do. The parent page controls the size of the frame and whether it's visible, and can put its own content over the frame by positioning etc, but it can't directly effect the way the actual frame content is rendered.

Here is another explanation from: How to apply CSS to iframe?

Edit: This does not work cross domain.

There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:

<iframe name='iframe1' id="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></iframe>

The style of the page embedded in the iframe must be either set by including it in the child page:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Or it can be loaded from the parent page with Javascript:
var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet";
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

Apply CSS to Iframe Content

2 Answers2

Linked