That script doesn't work too well in some browsers. Try this one, no configuration required unless you want to add style to the content document of the iframe:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>iFrame SSI IV - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
/* iFrame SSI IV - iframe auto-resize height script
* ©2008 John Davenport Scheuer
* This notice must remain for legal use. */
function sizeFrame(){
if(document.getElementsByTagName('frameset').length||!document.getElementsByTagName('iframe').length)
return;
var frEls=document.getElementsByTagName('iframe'), s='scrollHeight',
frObs=window.frames, o='offsetHeight', b='body', de='documentElement';
for (var brd=0, st, cs, hb, hd, d='document', i = frEls.length-1; i > -1; --i){
if(/^style /.test(frEls[i].className)){
st=frObs[i][d].createElement('link');
st.rel='stylesheet';
st.type='text/css';
st.href=frEls[i].className.replace(/^style ([^ ]+).*/, '$1.css');
frObs[i][d].getElementsByTagName('head')[0].appendChild(st);
}
if(frEls[i].currentStyle&&frEls[i].currentStyle.borderWidth&&!isNaN(parseInt(frEls[i].currentStyle.borderWidth)))
brd=parseInt(frEls[i].currentStyle.borderWidth)*2;
if(frObs[i][d][b].style.overflow)
cs=frObs[i][d][b].style.overflow;
frObs[i][d][b].style.overflow='hidden';
frEls[i].height=10;
frEls[i].height=Math.max(frObs[i][d][b][o], Math.max(frObs[i][d][de][o],
(hd=frObs[i][d][de][s]) != (hb=frObs[i][d][b][s])? Math.max(hd, hb):0))+
(frEls[i].height==frEls[i].offsetHeight&&frEls[i].getAttribute('frameborder',0)!=='0'?4:0)+brd;
frObs[i][d][b].style.overflow=typeof cs=='string'? cs : '';
};
if(!sizeFrame.setup){
for (var i = frEls.length-1; i > -1; --i)
sizeFrame.loadup(frEls[i]);
sizeFrame.setup=true;
}};
sizeFrame.loadup=function(o){
if ( typeof window.addEventListener != "undefined" )
o.addEventListener( "load", sizeFrame, false );
else if ( typeof window.attachEvent != "undefined" )
o.attachEvent( "onload", sizeFrame );
else {
if ( o.onload != null ) {
var oldOnload = o.onload;
o.onload = function(e) {
oldOnload(e);
sizeFrame();
};
}
else
o.onload = sizeFrame;
}};
if(document.getElementsByTagName&&window.frames)
sizeFrame.loadup(window);
</script>
</head>
<body>
<a href="some2.htm" target="mel">another page</a><br>
<a href="some.htm" target="mel">some page</a><br>
<iframe name="mel" class="style test" src="some.htm" width="100%" height="300" scrolling="auto" frameborder="1"></iframe>
</body>
</html>
If you want to add a stylesheet, use a class like so with your iframe:
Code:
<iframe name="mel" class="style test" src="some.htm" width="100%" height="300" scrolling="auto" frameborder="1"></iframe>
The word 'style' at the beginning of the class attribute tells the script that a stylesheet should be added, the second word ('test' in this case) will be the name of the stylesheet (without the .css extention). You can include a path, ex:
Code:
class="style http://www.some.com/styles/mainstyle"
There just cannot be any spaces in the path or name. If you want to apply an actual class to the iframe itself to style it (not its contents), that can follow the name of the stylesheet preceded by another space, ex:
Code:
class="style test bluebords"
That last bit will be ignored by the script, but if you have a class on the top page:
Code:
.bluebords {
border:3px solid blue;
}
it will be applied to the iframe itself.
Iframe SSI script II - Force css onto iframe content
Reply With Quote
Originally Posted by bentbird
Bookmarks