asked on

How can I change the css styles for contents in an i-frame?

We have some third party application that some else prior has data outputted to a page.
I can't seem to find the css, seems embedded deep somewhere but I have been able to atleast get the data into an i-frame although without any styles.
I can see the class names , but the stylesheet is not attached.

Is there a way ( please keep in mind I am a novice coder ) that I can style the contents of that i-frame?

Thank you in advance experts.

Dave Baldwin

'iframe' is supposed to be an independent window for another page with it's own styling. I don't know how you would get the styling in the main window to affect the page in the iframe.

nap0leon

Yes and No...

Yes, you can alter the contents of an iFrame, but you can only do it after the frame is loaded.

Save the samples below and run "frame.html" in your browser. To change the background color of the frame, you click the button. Try uncommenting the "changeFrame()" call that is inside of $(document)ready and you will receive an error because the document is ready before the iFrame is actually loaded. To get around this, you could put a delay on the execution of the changeFrame() command using a setTimeout, but...

The example below shows how to control the backgroundColor of the BODY. Exploding this to update lots of class with lots of different attributes is probably not the route you want to go... perhaps you should instead look at reading the src of the iFrame and then placing that HTML inside a DIV inside your page? (perhaps a simple jQuery .load() would suffice)

frame.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
	//changeFrame()	
});
</script>
<script type="text/javascript">
  function changeFrame() {
	var oIframe = document.getElementById("myframe");
	var oDoc = oIframe.contentWindow || oIframe.contentDocument;
	if (oDoc.document) {
	oDoc = oDoc.document;
	}
	oDoc.body.style.backgroundColor = "#00f";
	return true;
  }
</script>
</head>
<body>
<button onclick="return changeFrame();">Change Frame</button>
<iframe id="myframe" src="frame_contents.html" height="100" width="500" >
</body>
</html>

Open in new window

frame_contents.html

<html>
<body>
	<h1>Hello World!</h1>
</body>
</html>

Open in new window

colonelblue

ASKER

Thank you again as usual Nap0leon, very much appreciated.
The latter part of your reply applies. I would need to apply a handful of classes.
How do I "read" the src of the iFrame and then place it in a div to manipulate the css.
Are there any examples you may be able to point me towards where I may learn from.

Gratitude.

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

colonelblue

ASKER

Thank you so very much.
I learned a great deal from your generosity and expertise.
Nap0leon, you're just amazing! :)
Seriously.