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?
Add CSS to iframe elements using the page .css file
Styles from the parent will not be applied to the document within the iframe. The best solution is to add the stylesheet to the document in the iframe. Either via javascript or creating a template page to load in via src.
Something like:
var head = doc.head
var link = doc.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = ...src...
head.appendChild(link)
in your existing javascript.
I've put together a small example with a style block here
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.
Can I apply CSS to the elements within an iframe?
No, not from outside the iframe. An <iframe>
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 <iframe>
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.
Css–selector for when a html-document is inside an iframe?
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.
This means that as far as HTML and CSS are concerned, html
is always :root
(and therefore can never be :not(:root)
).
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
How to apply css to iframe content?
You can use jQuery's .content()
function to access it.
$('yourIframe').contents().find('#yourItemYouWantToChange').css({
opacity: 0,
color: 'purple'
});
Example
Here's an example showing me applying css to the jQuery logo typically found in the top left of the screen. Mind you, it has to be same domain/ports etc, so that's why my example features jsfiddle in the iframe.
http://jsfiddle.net/pPqGe/
Related Topics
Angular 2: How to Detect Changes in an Array? (@Input Property)
Get Caret (Cursor) Position in Contenteditable Area Containing HTML Content
Does JavaScript Support 64-Bit Integers
Closure in JavaScript - Whats Wrong
How to Return a View from an Ajax Call in Laravel 5
Localstorage Access from Local File
How to Bind the HTML <Title> Content in Vuejs
How to Swipe Top Down Jquery Mobile
How to Open New Tab in JavaScript Without Switching to the New Tab
JavaScript on the Bottom of the Page
HTML Drag and Drop on Mobile Devices
How to Set Preview of Video File, Selecting from Input Type='File'
Screen Scraping from a Web Page with a Lot of JavaScript
How to Test If a Variable Does Not Equal Either of Two Values