[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2012-03-28
5
Medium Priority
?
224 Views
Last Modified: 2012-03-30
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.
0
Comment
Question by:colonelblue
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37779671
'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.
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 37781747
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

0
 

Author Comment

by:colonelblue
ID: 37784558
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.
0
 
LVL 18

Accepted Solution

by:
nap0leon earned 2000 total points
ID: 37784682
With server-side code, you can do an httpRequest for the URL that is the src of your iFrame and simply write the response.text to your webpage.  If it is of a page other than your domain, you will probably need to do it this way to avoid XSS issues.

If you don't mind your page loading *then* fetching the contents of the div, you can load it using AJAX and add the HTML to your page.

Example of reading a URL using Classic ASP - "strReponse" contains the HTML returned by the URL:
set httpRequest = CreateObject("WinHttp.WinHttprequest.5.1")
httpRequest.Open "GET", CStr(URL)
httpRequest.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"
httpRequest.send
strResponse = httpRequest.responseText
set httpRequest=nothing

Open in new window


In your HTML, you would write the contents of strResponse at the appropriate area... e.g.,
<div id="iframe_content">
<% =strResponse %>
</div>

Open in new window


To do the same thing via jQuery's load method (you don't have to use jQuery, it's just simpler coding).  This works if you are accessing a file on your own domain.  It places the contents of the file located at "path_to_iframe/somepage.asp" into a div the div on your page that has ID="iframe_content".  To see an example, this is how I load the Experts-Exchange badge onto the coding-tips pages of my site (http://www.jasondahlin.com).
<script type="text/javascript">
$(document).ready(function() {
    //Load a webpage from your file system
    $('#iframe_content').load("path_to_iframe/somepage.asp");
});
</script>

Open in new window

0
 

Author Closing Comment

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

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question