PDA

View Full Version : Iframe SSI script II with Opera



Peter Jetson
04-21-2006, 01:09 PM
Script: Iframe SSI script II
URL: http://www.dynamicdrive.com/dynamicindex17/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/side/iframe_ssi_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:


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:


<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-dsl/special/iframe_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:


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


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


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




/* 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
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.

jscheuer1
04-23-2006, 04:24 PM
Not sure where to go from here, perhaps my earlier conclusion that it's just not do-able for all browsers is correct.

Did you try my latest post#8 (http://www.dynamicdrive.com/forums/showpost.php?p=33772&postcount=8) version? I'm also revisiting my other script, the one that goes on the top page and using what I've learned from post#8 (http://www.dynamicdrive.com/forums/showpost.php?p=33772&postcount=8), It s working much better. I like the idea of the script on the top page. Once I am through messing with it, I will post a link to a demo.

Peter Jetson
04-24-2006, 01:34 AM
Someone has just pointed me to this: http://www.dhtmlnirvana.com/content/autofit/index.htm#. It occurs to me that perhaps it is the tables that are stuffing things up - I'm going to try to put that code into a table and see what happens, and if it no longer works, I'll try to achieve a table-like look with CSS and see how that goes.

Peter

jscheuer1
04-24-2006, 04:26 AM
I'd be interested in what you think of these two demos. One (http://home.comcast.net/~jscheuer1/side/iframe_test.htm) uses your markup, the other (http://home.comcast.net/~jscheuer1/side/iframe_ssi_III_sub.htm) uses mine, both resize well and all iframe content pages use the same external script.

Peter Jetson
04-26-2006, 02:22 AM
I'd be interested in what you think of these two demos. One (http://home.comcast.net/~jscheuer1/side/iframe_test.htm) uses your markup, the other (http://home.comcast.net/~jscheuer1/side/iframe_ssi_III_sub.htm) uses mine, both resize well and all iframe content pages use the same external script.
Hi again - sorry for the delay, other duties called.

Both of your demos work, and work well. However, only on your web site, for some reason!

I copied the files from your web site onto mine, and when I view the copied pages, the centre frame doesn't get resized. And when I look into the code, I can't see where the javascript code gets called. Are you using ssi or something?

I've put what I believe to be a copy of your code (with renamed files to try to avoid confusion on my part, given the number of iterations I have in various locations) at http://www.asp.com.au/special/2/index.html

No doubt, I've done something embarassingly silly when copying the files, but I'm afraid I can't see it. Any ideas as to what I've done wrong?

Peter

jscheuer1
04-26-2006, 07:15 AM
You need this file:

rzPIframe.js (http://home.comcast.net/~jscheuer1/side/rzPIframe.js)

In your directory, it is used by all the iframe content pages (medium, short, long). You can right click on the file to save it using IE or in Opera or FF just click on the above link to view its contents.

Peter Jetson
04-26-2006, 07:30 AM
You need this file:

rzPIframe.js (http://home.comcast.net/~jscheuer1/side/rzPIframe.js)

In your directory, it is used by all the iframe content pages (medium, short, long). You can right click on the file to save it using IE or in Opera or FF just click on the above link to view its contents.
I did copy that file into the directory, John, but I can't see how the content pages call it.

Peter

jscheuer1
04-26-2006, 07:48 AM
Well, this is what I see when I try to view the source of http://www.asp.com.au/special/2/rzPIframe.js:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="/style.css" TITLE="Default">
<TITLE>ASP Microcomputers Redirection Page</TITLE>
<META NAME="description" CONTENT="Australian Designers and Manufacturers of Barcode Readers, Touch Memory Readers, Access Control, Time and Attendance, hardware and software.">
<META NAME="keywords" CONTENT="barcode readers, touch memory readers, access control, time and attendance, hardware and software, Australian">
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.asp.com.au">
</HEAD>
<BODY>
<div align="center">
<FONT FACE="Verdana,Arial,Helvetica,sans-serif" SIZE="2">
Sorry, the web page you have requested does not exist.
<P>
If you aren't automatically sent to ASP's home page<br>

within a few seconds, please click here:
<P>
<A HREF="http://www.asp.com.au">http://www.asp.com.au</A>
</FONT>
</DIV>
</BODY>
</HTML>


That's your server's 404 file not found page. So, the script file is not there. Here is how it is externally linked in the head of each content page:


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

Here are the contents of the rzPIframe.js file:




/* 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(){
var pad=window.opera? 0 : document.all? 4 : 20;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function collectWidth(){
var wVal=0
var objs=document.getElementsByTagName('*')
for (var i_tem = 0; i_tem < objs.length; i_tem++){
wVal=Math.max(objs[i_tem].offsetWidth, wVal)
}
return wVal;
}
parent.document.getElementsByName(window.name)[0].style.height=''
var resizeHeight=document.all? iecompattest().scrollHeight : iecompattest().offsetHeight;
var resizeWidth=window.opera? collectWidth() : iecompattest().scrollWidth;
resizeHeight+=parent.document.getElementsByName(window.name)[0].offsetWidth<resizeWidth? 18 : 0;
parent.document.getElementsByName(window.name)[0].style.height=resizeHeight + pad + '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;
}
}

Peter Jetson
04-26-2006, 11:05 PM
Drats, I must apologize, John. My FTP program was set to make all filenames lower case, so the file was there, just not accessible using that filename. I changed the javascript filename to lower case in the files, and the page now works, with IE6, Opera 8.54, FireFox 1.5.0.2 and SeaMonkey 1.0.1.

Thanks, and again, my apologies.

Peter

PS: I can't repeat it at will, but sometimes with Opera, an inactive scrollbar appears when changing to the medium content, which then disappears if you reload the same page. Since you said earlier that Opera is the hardest to convince to play properly, this can probably only be resolved with magic :)

jscheuer1
04-27-2006, 07:38 AM
I can't repeat it at will, but sometimes with Opera, an inactive scrollbar appears when changing to the medium content, which then disappears if you reload the same page. Since you said earlier that Opera is the hardest to convince to play properly, this can probably only be resolved with magic :)

There are some things I would try but, no guarantees. Most obvious would be to increase the Opera 'padding':


function resizeParentIframe(){
var pad=window.opera? 0 : document.all? 4 : 20;

As you can see from ts default value above, in my tests, Opera appeared to need no extra 'padding' to the height of the iframe as did IE (document.all? 4) and FF (: 20).

Another thing to try would be to set the iframe's style.overflow='visible' for Opera, this seemed to help in some of my earlier attempts. Other values could be tried (hidden, auto) as could the overflow of the content page's body or html element. One nice thing about Opera is that it has a window.opera object that is only true in Opera and that does nothing else but test for the presence of the Opera browsers. So you could do like:


if (window.opera)
parent.document.getElementsByName(window.name)[0].style.overflow='visible'

and/or:


if (window.opera)
document.getElementsByTagName('body')[0].style.overflow='hidden'

etc.

right before:


parent.document.getElementsByName(window.name)[0].style.height=resizeHeight + pad + 'px'

Nightwing308
03-30-2012, 01:42 AM
I'd be interested in what you think of these two demos. One (http://home.comcast.net/~jscheuer1/side/iframe_test.htm) uses your markup, the other (http://home.comcast.net/~jscheuer1/side/iframe_ssi_III_sub.htm) uses mine, both resize well and all iframe content pages use the same external script.

Hi John,

I know this string is ancient, but it's the only one I could find that comes close to the problem I have.
I came across your rzPIframe.js solution by accident, looking for a fix for the Iframe SSI script II, because I couldn't get it to contract the frame after switching from a page with long content back to a page with very short content. It only worked (contracted) in Internet Explorer, but in FireFox, Google Chrome, Opera and Safari the iFrame would remain extended to the longest page.

But long story short, I found your rzPIframe.js script, and it works like a charm in IE(8), FF, Google Chrome and Safari. YOUR test page also works for me in Opera, but mine (for some reason) does not. It will not even expand the iFrame to the height of the default page when it's loaded. I've spent the better part of two weeks now, trying to figure out what I might be missing (probably something simple), but I'm at my wits end.
I would so very much appreciate it if you could take a look at the test page I have set up here http://www.nightwingsgraphics.com/FrameTest/testpage.html
with a few pages of different content amount. They all expand and contract as they should in all browsers EXCEPT Opera.

Any help or advice (other than to "lose the iFrame") would be greatly appreciated.

jscheuer1
03-30-2012, 03:44 AM
Rather than lose the iframe, you could misplace it . . .

Just kidding. Truth is though I'm not big on iframe these days. AJAX is more to my liking.

And, funny thing is I just checked your page in Opera, I don't see any obvious problem with it visa vis resizing of the iframe. I may have missed something. What exactly do I have to do to see the problem? I hit all the buttons a few times and everything seemed to resize as one would hope/expect.

Perhaps you fixed it? Or maybe you fixed it and don't know it because the old problematic version is cached in your Opera. Or . . .

Anyways, as I recall Opera (like the others only more so in some cases) was the most finicky when the page being loaded into the iframe had absolutely positioned elements, or anything (like floats or even image tags without dimensions that might not load right away, etc., you name it) that might make it difficult to determine the height of the page being loaded into the iframe.

Nightwing308
03-30-2012, 04:17 AM
Rather than lose the iframe, you could misplace it . . .


LOL, I'd love to lose that iFrame, but that's not an option at this time.
Thanks for the reply, John, and sorry again for reviving such an old thread.

I've attached a screen shot of what I'm seeing in Opera...the Header
and menu buttons at the top, the menu buttons and footer at the bottom, but only the page title (none of the content) of the pages in the iFrame.

There are no absolute positioned elements, no floats, or much of anything on the test pages that could cause problems, and only a single image at the bottom of each page (it has dimensions set). I also cleared the cache, but still couldn't get the iFrame to expand.

I only have Opera version 9.64 available for testing (on my son's laptop and he doesn't want me up update it). Is it possible that this has something to do with it, and maybe in a newer version of Opera the problem doesn't exist?

One other thing is....I can actually scroll each page inside the iFrame with the mouse wheel when the cursor is over the page. It will then display the page content, but confined within a very low area, making it appear like the iFrame height is intentionally set to only about 200 pixels.

jscheuer1
03-30-2012, 06:04 AM
That could be it, Opera's up to 11.61 now. For that older version it might help to use a standards invoking DOCTYPE on all of the pages. Instead of:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Try (closest standards invoking equivalent):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Or you could just use the new simplified HTML 5 DOCTYPE:


<!DOCTYPE html>

And you might tell your son that the version 10 series of Opera did have a number problems, but things are going much more smoothly now with it.

Nightwing308
03-30-2012, 12:17 PM
Well, it looks like changing the DOCTYPE did the trick, even in the old version of Opera. Too bad, using a "standards invoking DOCTYPE" throws out my pretty colored scrollbars, but those don't work in FireFox and Chrome anyway, so I guess it's the lesser of two evils as long as it fixes the iFrame problem in Opera. Have to be willing to compromise until all browsers read/display all code in the same way....like that's ever going to happen. LOL

Thanks a whole lot for your help, John, I truly appreciate it.

jscheuer1
03-30-2012, 02:35 PM
You might be able to keep your quirks mode DOCTYPE if you edit this line in the script:


var resizeHeight=document.all? iecompattest().scrollHeight : iecompattest().offsetHeight;

Make that:


var resizeHeight=document.all && !window.opera? iecompattest().scrollHeight : iecompattest().offsetHeight;

If that doesn't work, You might be able to keep your custom scrollbar in standards mode by adding the html selector, change:


BODY { scrollbar-face-color: #000000; scrollbar-shadow-color:
#000000; scrollbar-highlight-color: #E4DA8D;
scrollbar-3dlight-color: #600001; scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000; scrollbar-arrow-color: #E4DA8D;}

to:


html, body { scrollbar-face-color: #000000; scrollbar-shadow-color:
#000000; scrollbar-highlight-color: #E4DA8D;
scrollbar-3dlight-color: #600001; scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000; scrollbar-arrow-color: #E4DA8D;}

Nightwing308
03-30-2012, 04:42 PM
Nah, those didn't work, but what (strangely) does seem to work in ALL browsers is keeping the
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
on the main page and only changing the pages inside the iFrame to <!DOCTYPE HTML>

Yeah, I know, we're not supposed to mix up DOCTYPES, but hey...whatever works!

On a side-note....I also noticed that using just the <!DOCTYPE HTML> on ALL the pages
eliminated not only the colored scrollbars in IE and Opera, but it also interfered with the

function loadorder() {
document.body.scrollTop=0
} script that's supposed to scroll the page back to the top whenever a new page is loaded into the iFrame.
Mixing up the DOCTYPES as described above seems to take care of that problem as well, and allows the automatic scrolling back to the top to function again properly in all browsers.

If that doesn't put a whole new meaning to "quirks mode", I don't know what could! LOL