Override Body Style for Content in an Iframe

Override body style for content in an iframe

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.

edit css of elements within iframe

[...] Obviously when the webpage renders that iframe it is calling an html doc hosted somewhere. I need to know if there is a way to alter that css.

The question of how to style an element inside an iFrame has come up on StackOverflow many times before - try having a look here:

How to apply CSS to iframe?

Another post that addresses it can be seen here:

Using CSS to affect div style inside iframe

And one with a rather short explanation here:

CSS override body style for content in iframe?

Override style of dynamic iframe

I would go for a better specified selector like:

body #PPDGFrame .panel iframe {
/* Your style here */
border: 2px solid #666;
}

I prefer to avoid using important, you will end up in a important hell, this is due to selector priorities

So what do i mean by selector priorities - lets make a small example:

<html>
<body>
<div id="wrap" class="wrap">
<div class="element"></div>
</div>
</body>
</html>

if you have HTML as above, then you need to select the "div.element" you can do it very simple.

.element { /* some style */ }

How did paypal do it, they inject a inline stylesheet which had a id selector which is stronger than a class selector

#wrap .element { /* some style */ }

So how to overwrite this, you simple make a "stronger" selector

body #wrap .element { /* some style */ }

I prefer to use bem syntax on my classes to use "lightest versions of selectors", read more about BEM-syntax here

If you need to do stuff after the content in the Iframe has been loaded, you will need to check for a callback in "the jslib" that your using and when it returns you'll do stuff

Why not use !important

In my opinion i pref to use it as a debugger tool instead of a production tool, i rarely use it to overwrite some javascript set style, which i also think is wrong when you can set a class that can hold the style instead.

If you end up having 5 or 10 similar selectors with !important on it starts to get confusing.

Let 3rd party change styles of an iframe of my site

You can't style 3rd party iframes because they are protected by the 'Same-origin Policy'.

That being said you could try sending the URL of a stylesheet as a GET parameter, and have site2.com/frame.html read this parameter and dynamically add it to its <head>.

For example, site1.com could create the iframe like so:

<iframe id="site2frame"
title="Inline Frame Example"
width="300"
height="200"
src="https://site2.com:3002/frame.html?css=externalstylesheet.css">
</iframe>

And site2.com/frame.html could read the GET parameter, create a link element with the href set to the value of the parameter and append it to document.head:

var css = new URLSearchParams(location.search).get('css');
var stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href= css;
document.head.append(stylesheet);

Edit pedantic-euclid-m120j



Related Topics



Leave a reply



Submit