File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes css for an iframe Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "css for an iframe" Watch "css for an iframe" New topic
Author

css for an iframe

Kevin Cornwell
Ranch Hand

Joined: Feb 01, 2005
Posts: 34
Is it possible to assign a stylesheet to a iframe after it is loaded? Note: the content of the iframe is sent with no styling at all.


<a href="http://www.kevincornwell.com" target="_blank" rel="nofollow">http://www.kevincornwell.com</A>
Linda Walters
Ranch Hand

Joined: Apr 30, 2005
Posts: 100
Since the iframe tag's src attribute is set to the URL of the document that the iframe displays, a .css file can be specified in that document with a link tag in the document's head. This will set styles for the document contained in the iframe only.

If it is the iframe itself to which you want to apply styles then those styles can be set in the document that contains the iframe or a JavaScript function can set the style attribute of the iframe at run time.

You can, of course, always hard code the styles right into the HTML, but that is not a best practice.


<a href="http://labryssystems.net/pblog/index.php" target="_blank" rel="nofollow">Javaville Gazette</a><br />Non-cooperation with evil is a duty. -- Mahatma Gandhi
Linda Walters
Ranch Hand

Joined: Apr 30, 2005
Posts: 100
OK, I missed that you were trying to do this after loading, which, of course, is a different story than what I first answered.

I'm not certain which you want to do, add styles to the iframe itself or to the contents of the iframe. Either is possible and both would require the use of JavaScript.

If you want to add/change the style of the iframe itself, that is easy enough to do by calling a JavaScript function that would get the DOM element for the iframe, by calling the document object's getElementById() passing it the iframe's id (you can also call getElementByName() and pass it the name of the iframe, but I prefer id). e.g.: var oIFrame = document.getElementById(iframeid) . Then set the style, for example, border-color with oIFrame.style.border-color="#FF0000";

The same goes for elements of the document inside the iframe, but with the added complication that you after getting the iframe DOM element, you need to drill down into it to get the document.
[ April 10, 2006: Message edited by: Linda Walters ]
Kevin Cornwell
Ranch Hand

Joined: Feb 01, 2005
Posts: 34
Thanks for the repsonse,
I am trying to apply a style sheet to a iframe after the iframe has loaded. I do not want to touch the sourse content of the iframe.

??? so something like...

Of course this does not work.
[ April 10, 2006: Message edited by: Kevin Cornwell ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60057
    
  65

Why are you trying to do this in the first place? Perhaps an alternative means is possible.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
look into createElement()

Eric
Kevin Cornwell
Ranch Hand

Joined: Feb 01, 2005
Posts: 34
Thanks Eric, but I can't seem to find a way to use that function. I must be doing something wrong.

PS, why does this return the html for the parent and not the iframe?
Kevin Cornwell
Ranch Hand

Joined: Feb 01, 2005
Posts: 34
Originally posted by Bear Bibeault:
Why are you trying to do this in the first place? Perhaps an alternative means is possible.


apply a css style sheet to the contents of an iframe with out changing touching the source of the iframe. In other words somehow inject
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60057
    
  65

Yes, that much was clear. But why? What prevents you from just creating the link tag in the source?

And Eric's hint was to use creatElement to create a new link tag from scratch in the DOM.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Originally posted by Kevin Cornwell:
Thanks Eric, but I can't seem to find a way to use that function. I must be doing something wrong.

PS, why does this return the html for the parent and not the iframe?


Do not use the second body

The following is how you would do it for the current page:


See if you can figure out how to do it for the iframe.

Eric
Kevin Cornwell
Ranch Hand

Joined: Feb 01, 2005
Posts: 34
Originally posted by Bear Bibeault:
Yes, that much was clear. But why? What prevents you from just creating the link tag in the source?

And Eric's hint was to use creatElement to create a new link tag from scratch in the DOM.


Im not sure you you care, but since you want to know, there are too many pages for me to "just create the link tag in the source".

Eric's hint does me no good if I can't drop the the new element INSIDE the iframe FROM the parent.
[ April 11, 2006: Message edited by: Kevin Cornwell ]
Linda Walters
Ranch Hand

Joined: Apr 30, 2005
Posts: 100
Kevin said:

'...there are too many pages for me to "just create the link tag in the source".'

About how many page files are we talking about?
Are they all static pages or are some build on the servlet either directly in Java or by applying XSL transforms to XML? If there are either, then the link to the css file could be put in at that level.

If it is all static HTML pages the just bite the bullet, cowpoke and edit each one.
[ April 11, 2006: Message edited by: Linda Walters ]
Kevin Cornwell
Ranch Hand

Joined: Feb 01, 2005
Posts: 34
Thanks once again Javascript Guru Eric,

Finally got it...



As you can see I'm caputuring the parent style sheet (theme css from SharePoint) and applying it to the frame (which has classic asp code).
[ April 13, 2006: Message edited by: Kevin Cornwell ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Replace the first o with &#111; and you have no problems.

Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: css for an iframe
 
Similar Threads
Better UXP Downloading Content
Load a file(.pdf,.doc,.jpg) in same page
displaying an external html in jsp
Frameless Pop up window in JavaScript
getting rid of edges on round component