Hi everyone. I have an IFRAME that loads a
user-specified document, but I need to set
the below styles of the document in the IFRAME
otherwise it'll look ugly.  How can I effectively
"inject" these styles into an IFRAME's existing
content?

body {

margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

} 

> How can I effectively
> "inject" these styles into an IFRAME's existing
> content?
>
> body {
>
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
>
> }


Options to consider:-

1.  You could experiment using the "marginheight" and "marginwidth"
attributes of the IFRAME itself.  If no margin is set on the body
element of the inner web page, then these will be applied.

2.  You can access the document in the IFRAME using one of various
methods:-

IE

var myBody=document.frames["myframe"].document.body;
OR
var
myBody=document.getElementById("myframe").contentWindow.document.body;

Mozilla
var
myBody=document.getElementById("myframe").contentWindow.document.body;
var myBody=document.getElementById("myframe").contentDocument.body;

However in doing so, the above assumes that the inner web page is
loaded and fully parsed.

In some cases you may need to detect this, and you can do so by using:-

IE
The "readyState" property on the IFRAME

var sCurrentState=document.getElementById("myframe").readyState;

When it reads "complete" you can then apply the changes to the margin.

IE and Mozilla
The "onload" event.

<IFRAME onload="myFunctionToFireOnLoad()"...

or in script

var myIFrame=document.getElementById("myframe");
myFrame.onload=function()
{
// FUNCTION TO FIRE ON LOAD
};