CSS override body style for content in iframe?

    |
  • Added:
  • |
  • In: Wordpress

How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframe is of page that is part of my site.

The reason I need this is my site has a black background assigned to the body, and then a white background assigned to divs that contain text. A WYSIWYG editor uses an iframe to embed content when editing, but it doesn't include the div, so the text is very hard to read.

The body of the iframe when in the editor has a class that isn't used anywhere else, so Im assuming this was put there so problems like this could be solved. However when I apply styles to class.body they dont override the styles applied to body. The weird thing is that the styles do appear in firbug, so ive no idea whats going on!

Thanks

UPDATE - Ive tried @mikeq's solution of adding a style to the class that is the body's class. This doesn't work when added to the main page stylesheet, but it does work when added with firebug. Im assuming this is because firebug is applied to all all ements on the page where as the css is not applied within iframes. Does this mean that adding the css after window load with javascript would work?

This Question Has 8 Answeres | Orginal Question | jd6699

An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.

As others have stated, your options are:

  • give the file that is being loaded in the iframe the necessary CSS
  • if the file in the iframe is from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.
  • don't use an iframe (are you SURE you need one?)

An iframe has another scope, so you can't access it to style or to change its content with javascript.

It's basically "another page".

The only thing you can do is to edit its own CSS, because with your global CSS you can't do anything.

This code uses vanilla JavaScript. It creates a new <style> element. It sets the text content of that element to be a string containing the new CSS. And it appends that element directly to the iframe document's head.

var iframe = document.getElementById('the-iframe'); var style = document.createElement('style'); style.textContent = 'body {' + ' background-color: some-color;' + ' background-image: some-image;' + '}' ; iframe.contentDocument.head.appendChild(style); 

The following jquery script works for me. Tested on Chrome and IE8. The inner iframe references a page that is on the same domain as the parent page.

In this particular case, I am hiding an element with a specific class in the inner iframe.

Basically, you just append a 'style' element to the 'head' of the inner iframe.

$('iframe').load( function() { $('iframe').contents().find("head") .append($("<style type='text/css'> .my-class{display:none;} </style>")); }); 

give the body of your iframe page an ID (or class if you wish)

<html> <head></head> <body id="myId"> </body> </html> 

then, also within the iframe's page, assign a background to that in CSS

#myId { background-color: white; } 

You cannot change the style of a page displayed in an iframe unless you have direct access and therefore ownership of the source html and/or css files.

This is to stop XSS (Cross Site Scripting)

Perhaps it's changed now, but I have used a separate stylesheet with this element:

.feedEkList iframe { max-width: 435px!important; width: 435px!important; height: 320px!important; } 

to successfully style embedded youtube iframes...see the blog posts on this page.

Override another domain iframe CSS

By using part of SimpleSam5's answer, I achieved this with a few of Tawk's chat iframes (their customization interface is fine but I needed further customizations).

In this particular iframe that shows up on mobile devices, I needed to hide the default icon and place one of my background images. I did the following:

Tawk_API.onLoad = function() { // without a specific API, you may try a similar load function // perhaps with a setTimeout to ensure the iframe's content is fully loaded $('#mtawkchat-minified-iframe-element'). contents().find("head").append( $("<style type='text/css'>"+ "#tawkchat-status-text-container {"+ "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+ "background-size: 100%;"+ "} "+ "#tawkchat-status-icon {display:none} </style>") ); }; 

I do not own any Tawk's domain and this worked for me, thus you may do this even if it's not from the same parent domain (despite Jeremy Becker's comment on Sam's answer).


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns
Top