PDA

View Full Version : Iframe SSI script II - Force css onto iframe content



cretin
02-19-2008, 02:14 PM
1) Script Title: Iframe SSI script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

3) Describe problem: The script is perfect in doing what its meant to, however i want a bit more, i want the content of the iframe to either load the css of its parent page or to load an external css page. its not possible for me to edit the content of whats in the iframe because its a simple directory listing (im trying to put together a clan website and im using the directory listing for a downloads section).

jscheuer1
02-19-2008, 05:25 PM
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:


<!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:


<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:


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:


class="style test bluebords"

That last bit will be ignored by the script, but if you have a class on the top page:


.bluebords {
border:3px solid blue;
}

it will be applied to the iframe itself.

cretin
02-20-2008, 07:52 AM
omg thank you so much, i cant believe how simple the solution is

edit: i just opened the page up in internet explorer and the script isnt working :< the iframe now has a fixed hiehgt of about 10px and the css isnt loading at all, its not even inheriting the background of its parent

jscheuer1
02-20-2008, 10:08 AM
Well, the script is tested in IE, among others. I'm thinking that perhaps the page you are loading has no real height as seen by IE, but it could be something else:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Ooops, I just noticed a logical error in the script for IE under certain circumstances, I have fixed it in my previous post.

bentbird
02-21-2008, 08:59 PM
jscheuer1 your code works perfectly great and thank you for it. The one browser it will not work in is Safari 3.0. It works great in previous versions of safari but in 3.0 the content comes up blank.

Any Ideas for a work around?

Thanks
Patrick

http://www.whereisdoe.com/csa/_csaintl/test.php

bentbird
02-21-2008, 09:11 PM
http://www.whereisdoe.com/csa/_csaintl/test.php

jscheuer1
02-22-2008, 02:15 AM
jscheuer1 your code works perfectly great and thank you for it. The one browser it will not work in is Safari 3.0. It works great in previous versions of safari but in 3.0 the content comes up blank.

Any Ideas for a work around?

Thanks
Patrick

http://www.whereisdoe.com/csa/_csaintl/test.php

It doesn't seem to work in Opera on your site either. That said, the script works in that browser, as well as in Safari 3 - with basic pages. These iframe 'SSI' scripts have been around for awhile. With very basic pages, they work in most browsers (at least for those that they were written for - earlier ones were only written for a few browsers). But with more complex pages, there can be problems in one or more browsers, even the ones written for only a few browsers had this issue with one or more of the browsers that they were written for - if the pages became more complex.

The main issue here though is, how can you import content from one page to another. There are at least two other approaches, server-side includes (a definite possibility, since you already are using PHP), and AJAX (essentially an extension of javascript). If I knew more about your specific project, I would probably be able to make a recommendation.

jscheuer1
02-22-2008, 07:11 AM
I'm working on an update to this script, in its new current form, it should work out for you. There have been changes, the css is now specified with the file extension, if you are using that feature, and iframes may be excluded. It also has added code to prevent errors in very old browser that don't support iframe, this requires a body onload event. Here is the current code:


<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=this==window? document.getElementsByTagName('iframe') : [this], s='scrollHeight',
frObs=this==window? this.frames : sizeFrame.ff(this), o='offsetHeight', b='body', de='documentElement';
for (var brd=0, st, cs, hb, hd, d='document', i = frEls.length-1; i > -1; --i){
if(this!=window||sizeFrame.chk(frEls[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');
frObs[i][d].getElementsByTagName('head')[0].appendChild(st);
}
if(frEls[i].currentStyle&&/^\d+(px){0,1}$/.test(frEls[i].currentStyle.borderWidth))
brd=isNaN(brd=parseInt(frEls[i].currentStyle.borderWidth)*2)? 0 : brd;
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=sizeFrame.ie55? frObs[i][d][b][s]+20 : Math.max(Math.max(frObs[i][d][b][o], frObs[i][d][de][o]), Math.max(frObs[i][d][b][s], frObs[i][d][de][s]))+20;
frObs[i][d][b].style.overflow=typeof cs=='string'? cs : '';
}};
if(!sizeFrame.setup){
for (var i = frEls.length-1; i > -1; --i)
if(sizeFrame.chk(frEls[i]))
sizeFrame.loadup(frEls[i]);
sizeFrame.setup=true;
}};

sizeFrame.ff=function(f){
var frEls=document.getElementsByTagName('iframe'), frObs=window.frames;
for (var i = frEls.length-1; i > -1; --i) if(frEls[i]==f) return [frObs[i]];
return null;
}

sizeFrame.chk=function(f){
var re=new RegExp('( '+f.id+' )|( '+f.name+' )|( '+f.className.split(' ').join(' )|( ')+' )');
return !re.test(' '+sizeFrame.excluded.join(' ')+' ');
}

sizeFrame.loadFrame=function(el,t){
if(!document.layers&&document.getElementById&&typeof window.frames[t].location.href=='string'){
window.open(el.href,t);
return false;
}
return true;
}

sizeFrame.loadup=function(o){
if(!sizeFrame.apply)
return;
if ( typeof o.addEventListener != "undefined" )
o.addEventListener( "load", function(){sizeFrame.apply(o);}, false );
else if ( typeof o.attachEvent != "undefined" )
o.attachEvent( "onload", function(){sizeFrame.apply(o);} );
else {
if ( o.onload != null ) {
var oldOnload = o.onload;
o.onload = function(e) {
oldOnload(e);
sizeFrame.apply(o);
};
}
else
o.onload = function(){sizeFrame.apply(o);};
}};

if(document.getElementsByTagName&&window.frames)
sizeFrame.loadup(window);

sizeFrame.killIframes=function(){
var d=document, w=window;
if (d.layers) return;
if((w=w.frames)&&(w=w.frames[0])&&(!d.getElementById||typeof w.location.href!='string'))
if((d=d.all)&&(d=d.tags)&&(d=d('iframe')))
for(var i=0;i<d.length;++i)
d[i].style.display='none';
}

sizeFrame.excluded=['bob', 'carol', 'ted', 'alice']; // set iframe ID's, names, or class names to exclude

</script>
<!--[if IE 5.5]>
<script type="text/javascript">
sizeFrame.ie55=true;
</script>
<![endif]-->
</head>
<body onload="sizeFrame.killIframes();">

bentbird
02-28-2008, 07:11 PM
John,

I honestly can not thank you enough. I was buried underneath other projects since my last post and seeing the code, testing it and it working perfectly has made my week.

I do have some more work to do throughout the site with my flash work but you can get the idea what you helped me with here.

http://whereisdoe.com/csa/_csaintl/corpresources.php

Thanks again
Patrick

eshu
04-15-2008, 08:34 AM
thx dude!
this script should stand out there!
but still ,did not want to discredit early works!
anyway, this one is working perfectly because common iframes does not support using js on iframes from parent page (or i dont know how to make it work) with this one i dont have to think much, it something more like out-of-the-box!