Iframe SSI script II with Opera

**Peter Jetson** · 04-21-2006, 01:09 PM

Script: Iframe SSI script II
URL: http://www.dynamicdrive.com/dynamici...iframessi2.htm

I've been looking for a script to allow the height of an iframe to be controlled by the content loaded into the iframe, and this is the closest I've come to a reasonable answer. However, while it works with IE and the Mozilla family, it doesn't seem to work with Opera (I tested it with V8.54).

Does anyone know of a similar script that will work with Opera? Or how the existing script can be modified to work for Opera?

Thanks, Peter

**jscheuer1** · 04-21-2006, 05:43 PM

Opera is really tricky where iframes are concerned. I've got this version, it will not validate (if that is a concern) but works in all three (a little buggy in Opera but, not too bad - sometimes an empty vertical scrollbar appears):

http://home.comcast.net/~jscheuer1/s...i_III_demo.htm

**Peter Jetson** · 04-21-2006, 11:41 PM

Thanks. I believe I've implemented your code correctly, here: http://www.keypoint.com.au/~jetson-dsl/special/r.html

But it works:

1. All of the time in IE.

2. Most of the time in Mozilla - scroll bars sometimes appear, particularly when you change from long to medium content, but then disappear if you reload the same content.

3. Mostly in Opera - a disabled scroll bar appears always with the long content, and sometimes with the medium content.

Peter

**jscheuer1** · 04-22-2006, 08:08 PM

In Mozilla, perhaps your:

Code:

var mAdjust=50

should be set differently. Also, if you can keep this baby outside of tables, and/or absolutely or relatively or floated containers, that is always a plus in Mozilla.

Opera - I told you so. On the pages loaded into the iframe one might try putting in the head:

Code:

<script type="text/javascript">
if (window.opera)
onload=function(){
window.scrollTo(0, 2000)
setTimeout("window.scrollTo(0, 0)", 20)
}
</script>

Untested but, this has worked in Opera for me in the past when odd scrollbar behavior was observed.

**jscheuer1** · 04-22-2006, 08:34 PM

Oh, another thing I just noticed, your demo page has no DOCTYPE. Using one might improve Mozilla performance. I'd try that first.

**Peter Jetson** · 04-23-2006, 01:43 AM

Thanks, John. I'd already tried playing with the mAdjust value in Mozilla (that's how I arrived at the value 50), but it didn't seem to help.

Also, thanks for the extra code for Opera, but it doesn't seem to have made any difference.

I've all but arrived at the conclusion that it isn't possible to do what I want to do. Which is a shame, because google searches show that there seem to be a lot of people who want to do the same kind of thing.

As for the tables, they allowed me to easily prototype the layout that I wanted. I guess that I could use CSS, but really, that page is just test code, and I wanted to spend as little time on the layout as possible while I worked to get the "dynamically resized iframe" idea going.

I'll add a DOCTYPE and see if that makes any difference to Mozilla (actually SeaMonkey was what I tested it with). Thanks.

Regards, Peter

**Peter Jetson** · 04-23-2006, 04:54 AM

I was just about to toss in the towel over this stupid *&*(%^&# idea, when just a few minutes ago I decided to search the newsgroups instead of doing another normal Google search. And, low and behold, someone had posted a single line of code that I thought must have been far too simple to work.

Well, to my extreme surprise, it very very nearly worked! And with IE, Mozilla, and Opera!

I just needed to add a little "fudge factor" to the equation, to put some extra white-space at the end of the iframe, and once I did that, everything fell into place.

The latest version of my test page is at http://www.keypoint.com.au/~jetson-d...rame_test.html

Basically, the iframe page is completely standard, and the content pages simply need an onload event added to the body tag, like so:

Code:

<body onload='parent.document.all[window.name].style.height=document. body.scrollHeight + 50'>

The "+ 50" is my fudge factor, and it was a total guess - it could probably be smaller, but I'll leave that as an "exercise to the reader" :-)

Regards, Peter

**jscheuer1** · 04-23-2006, 10:50 AM

Didn't work so hot here in FF1.5.2. Moving up through the sizes was fine but moving down through them left extra space and alternating between medium and large progressively lengthened the page. There is also the matter of the top window being resized while the page is being viewed. Things also tended to break down with smaller top window sizes (800x600 was particularly poor). But, I liked the basic idea.

Now, I only tested this with IE6, Opera8.54 and FF1.5.2 with the following DOCTYPE on each page but, it should work with other DOCTYPEs or none. Mixing DOCTYPEs among the various pages is probably a bad idea.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

I used this script call in the head of each page that was to appear in the iframe:

HTML Code:

<script type="text/javascript" src="rzPIframe.js">

/* Resize Iframe Script © John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums
   User Name: jscheuer1
   This Credit Must Remain for Legal Use
*/

</script>

With this as the contents of rzPIframe.js:

Code:

/* Resize Iframe Script © John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums
   User Name: jscheuer1
   This Credit Must Remain for Legal Use
*/

function resizeParentIframe(){
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
parent.document.getElementsByName(window.name)[0].style.height=''
var resizeHeight=document.all? iecompattest().scrollHeight : iecompattest().offsetHeight;
parent.document.getElementsByName(window.name)[0].style.height=resizeHeight + 'px'
}

if ( document.getElementsByName && window.name && location.href!==top.location.href && parent.document.getElementsByName(window.name)[0].tagName.toLowerCase()=='iframe' ) {
if ( typeof window.addEventListener != "undefined" ) {
    window.addEventListener( "load", resizeParentIframe, false );
    parent.window.addEventListener( "resize", resizeParentIframe, false );
    }
else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", resizeParentIframe );
    parent.window.attachEvent( "onresize", resizeParentIframe );
    }
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            resizeParentIframe();
        };
    }
    else
        window.onload = resizeParentIframe;

    if ( parent.window.onresize != null ) {
        var oldOnresize = parent.window.onresize;
        parent.window.onresize = function ( e ) {
            oldOnresize( e );
            resizeParentIframe();
        };
    }
    else
        parent.window.onresize = resizeParentIframe;
}
}

Most of the code is just to get it to 'play nice' with other scripts that might happen to be on the parent or sub pages and to check that the objects and methods used are available.

**Peter Jetson** · 04-23-2006, 12:57 PM

Originally Posted by jscheuer1

Didn't work so hot here in FF1.5.2. Moving up through the sizes was fine but moving down through them left extra space and alternating between medium and large progressively lengthened the page.

I just downloaded Firefox and tried it out, and I see what you mean. I'd been testing it with the current version of Mozilla SeaMonkey, which I had always assumed would render identically to Firefox, since the codebase is supposed to be the same. However, as you point out, it doesn't render properly in Firefox :-(

Not sure where to go from here, perhaps my earlier conclusion that it's just not do-able for all browsers is correct.

Peter

**Twey** · 04-23-2006, 01:46 PM

I'd been testing it with the current version of Mozilla SeaMonkey, which I had always assumed would render identically to Firefox, since the codebase is supposed to be the same.

It is largely, but there're a few differences.

Thread: Iframe SSI script II with Opera

Thread Tools

Search Thread

Iframe SSI script II with Opera

Bookmarks

Bookmarks

Posting Permissions