css for an iframe

[Kevin Cornwell]

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.

[Linda Walters]

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.

[Linda Walters]

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]

Thanks for the repsonse,
I am trying to apply a style sheet

<Link REL='stylesheet' Type='text/css' HREF='/css/blah.css'>

to a iframe after the iframe has loaded. I do not want to touch the sourse content of the iframe.

??? so something like...

document.frames.myFrame.styleSheet.href = "/css/blah.css"

Of course this does not work.
[ April 10, 2006: Message edited by: Kevin Cornwell ]

[Bear Bibeault]

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

[Eric Pascarello]

look into createElement()

Eric

[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?

alert(document.getElementById('MY_iframe').document.body.innerHTML)

[Kevin Cornwell]

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

<Link REL='stylesheet' Type='text/css' HREF='http://blah.com/_themes/deepblueteas/deep1011-109.css'>

[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.

[Eric Pascarello]

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?

alert(document.getElementById('MY_iframe').document.body.innerHTML)

Do not use the second body

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

window.onload = function(){
  var newElem = document.createElement("link");
  newElem.rel="stylesheet";
  newElem.type="text/css";
  newElem.href = "test.css";
  document.documentElement.childNodes[0].appendChild(newElem);
}

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

Eric

[Kevin Cornwell]

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]

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]

Thanks once again Javascript Guru Eric,

Finally got it...

window.onload = function(){
  var iFrameDoc = document.frames['my_iframe'].document;
  var newElem = iFrameDoc.createElement("link");
  newElem.rel="stylesheet";
  newElem.type="text/css";
  newElem.href = "https://www.blah.com/" + parent.document.styleSheets[2].href;
  iFrameDoc.documentElement.childNodes[1].childNodes[0].appendChild(newElem);
  //alert(iFrameDoc.documentElement.childNodes[1].childNodes[0].innerHTML);
}

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]

Replace the first o with o and you have no problems.

Eric