Iframe auto-height display problem in Safari/Chrome

In a Joomla CMS site, I'm using iframes ("wrapper menu item," in Joomla-speak) to display pages from an external site on the same server. I have iframe "auto height" selected, and this works perfectly in IE and Firefox, on both Mac and Windows systems.

But there's an auto-height problem in Safari and Chrome. The first iframe always comes up at the correct height -- meaning the full page of content is displayed, with no vertical scrollbar. The problem arises when a link in the iframe is clicked. The height of the new page, as well as that of all subsequent linked pages, is correct if its height is equal to or greater than that of the first. But if its height is less, the iframe never shrinks down to the shorter height. So, regardless of the height of subsequent linked pages, the iframe will never decrease in height. It will continue to display empty space below the new iframed page's content, filling the iframe so that it's always as tall as the tallest iframed page. This may cause the outer page to become too long and develop a vertical scrollbar.

As you can see from line 8 of the script below, 60px of height is added to the iframed page (style.height = h + 60 + 'px'). On Safari and Chrome, this has the consequence of adding 60px to the height of the tallest iframed page each time an internal page's link is clicked. So with each click, not only does the iframe never shrink down to the height of shorter new iframed pages, but it gains 60px of height.

Click here for a live example of the problem.

Below is the JavaScript in Joomla that sets the iframe auto-height. I can modify it, and I can modify the pages being iframed.

Here's my question: Is there a way by modifying the code below, and/or by adding new code to my iframed pages, to get pages from my external site (same domain) to display in my Joomla iframes -- set on auto-height -- at the correct heights in Safari and Chrome?

Thanks!
function iFrameHeight() {
    var h = 0;
    if ( !document.all ) {
        h = document.getElementById('blockrandom').contentDocument.height;
        document.getElementById('blockrandom').style.height = h + 60 + 'px';
    } else if ( document.all ) {
        h = document.frames('blockrandom').document.body.scrollHeight;
        document.all.blockrandom.style.height = h + 20 + 'px';
    }
}

Open in new window

Jonathan GreenbergAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Xper4netCommented:
Try the following:

function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var h = Math.max(f.document.body.offsetHeight, f.document.body.scrollHeight) ;
	if ( !document.all ) {
		h += 60 ;
	} else if ( document.all ) {
		h += 20 ;
	}
	h += 'px' ;
}

Open in new window

Xper4netCommented:
Oops, bad intermediary code copied...
The good one:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var h = Math.max(f.document.body.offsetHeight, f.document.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", c) ;
}

Open in new window

Xper4netCommented:
I'm not really awake this morning... last line is f.setAttribute("height", h) ;

Some comments:
> I've kept document.all test, but it's not a good way to test browsers.
> setAttribute is not mandatory, but recommended.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Jonathan GreenbergAuthor Commented:
Thank you. But this has turned the auto-height off completely. The iframes are now just defaulting to my my minimum height of 100px. If you want me to explain this, please let me know.
Jonathan GreenbergAuthor Commented:
Oh, hold on, I just saw your last message! Let me try that.
Xper4netCommented:
Have you tried the second sample code or the first one?
Jonathan GreenbergAuthor Commented:
The second. That's what my comment was referring to. Now I've replaced it with your comment from ID 34446923. No change, it's still not auto-heighting at all now.

Here's what the code now looks like:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var h = Math.max(f.document.body.offsetHeight, f.document.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", h) ;
}

Open in new window

Xper4netCommented:
Ok, just an issue for accessing frame's document.
Adjust as this:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var d = (f.contentWindow || f.contentDocument);
	var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", h)
}

Open in new window

Jonathan GreenbergAuthor Commented:
No, still the same thing. It's only displaying at a height of 100px, which is essentially the minimum height setting.
Jonathan GreenbergAuthor Commented:
Joomla has basic required iframe setting parameters for width, height, scrollbars, and auto-height. Auto-height has radio buttons of No and Yes; I have it on Yes. The scrollbar options are radio buttons of No, Yes and Auto; I have No selected. The width and height parameters are text fields. Width works fine in all browsers at '100%'. Height cannot be in percentages, so I use 100, which results in a minimum iframe height of 100px.
Xper4netCommented:
Sorry again, second line would be:
var d = (f.contentWindow.document || f.contentDocument);
Now it should work!
Jonathan GreenbergAuthor Commented:
OK, the auto-height is back on. But now the iframe is still not shrinking back down to size. Instead, it's growing taller by 20px each time an internal link is clicked.
Jonathan GreenbergAuthor Commented:
Just to be clear, this is the code I'm using right now:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var d = (f.contentWindow.document || f.contentDocument) ;
	var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", h) ;
}

Open in new window

Xper4netCommented:
Ok, it seems that we face the classical issue which returns a bad height when frame is tall enough.
The only way I've found to fix that is to return temporarily to a smaller height. Try the following:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
        f.style.height = '100px' ;
	var d = (f.contentWindow.document || f.contentDocument);
	var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", h)
}

Open in new window

If it doesn't work as this, we'll have to synchronize with the onresize event.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jonathan GreenbergAuthor Commented:
You're a genius! That's it, it worked! I really was losing hope. Thank you!
Xper4netCommented:
You're welcome! But if you knew how much time I've spent on these kind of iframes issues...
Jonathan GreenbergAuthor Commented:
Well, I hope your experience pays off for you as well as it just has for me! Thanks again. I'm really grateful.
ECLAC-CKMCCommented:
Hello xper4net. I am very new to Joomla, and I also have a similar need.  I found the iFrameHeight code in /components/com_wrapper/views/wrapper/tmpl/default.php.  I made the change as you prescribed, however, when I refresh the page, I am not getting the auto-adjusted height.  Note that I am using <iframe ... width="100%" height="100%" scrolling="auto" ... >.  I have also tried height="100" but without success.  What am I missing?  Thank you in advance.
Xper4netCommented:
I can't answer without having a look on page content.
Note that this code can operate only for frame which displaying content belonging to the same domain. If this is not the case, another solution should be applied.
But as this question is now closed, please create a new one to handle your own case.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.