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);
Related Topics
Want My Button to Remain Dark When Clicked
Why Does Height 100% Work When Doctype Is Removed
How to Make Bootstrap Columns All the Same Height
Change Navbar Color in Twitter Bootstrap
Z-Index Not Working With Fixed Positioning
Css '≫' Selector; What Is It
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements
Css 3 Slide-In from Left Transition
Preventing Scroll Bars from Being Hidden For Macos Trackpad Users in Webkit/Blink
Bootstrap 4 - Change Position of Carousel Controls
Footer At Bottom of Page or Content, Whichever Is Lower
How to Disable Text Selection Highlighting
How to Really Isolate Stylesheets in the Google Chrome Extension
Does "Display:None" Prevent an Image from Loading
How to Set the Stacking Order of Pseudo-Elements Below Their Parent Element