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").contentW indow.document.body;
Mozilla
var
myBody=document.getElementById("myframe").contentW indow.document.body;
var myBody=document.getElementById("myframe").contentD ocument.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").r eadyState;
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
};