View Full Version : Safari Iframe Resize issue

10-01-2008, 07:25 PM
1) Script Title: IFrame SSI script II

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

3) Describe problem:

I am having a problem with a dynamic iframe resizing script I got from Dynamic Drive. The script works great in all browsers but Safari and the issue is this:

When the first page of content loads into the iframe it resizes the iframe height properly. However, when you click a link on the page that has loaded into the dynamically generated iframe, it does not do an automatic refresh of the page in Safari so the content of the second page loaded loads at the top of the iframe. The problem is, if the first page loaded is longer than the second, the user sees nothing because the content is at the top of the page and the page has not refreshed and therefore not resized the iframe according to the new content. This only happens in Safari.

Here's an example page I am building with the problem https://www.sweetgrassfibers.com/womtop_test.php

Can anyone help?

Doctype, script and iframe code all below.


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

<script type="text/javascript">

* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
//reveal iframe for lower end browsers? (see var above):
if ((document.all document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)

function loadintoIframe(iframeid, url){
if (document.getElementById)

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)


<iframe id="myframe" src="womtop_products_test.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%;></iframe>