• December 7, 2009
  • Posted by: thestateofart
  • Categories: Design, Film
No Comments

There are millions of posts online about how to resize iframes for ie and firefox, but none of them were successful in my case, which had WordPress content in the iframe (evidently FF can’t read the page height of the wordpress file from its iframe parent). So, I fashioned a workaround which makes it happen. Parent reads the innerHTML of iframe content which has the height inserted through script.

javascript:

function resizeFrame(f) {
if( typeof( window.innerWidth ) == ‘number’ ) {
//Non-IE
var jerky = document.getElementById(f).contentDocument.getElementById( ‘height’ ).innerHTML;
document.getElementById( f ).height = (parseInt(jerky) + 60) + “px”;

} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
document.getElementById(f).style.height = (document.getElementById(f).contentWindow.document.body.scrollHeight+20)+”px”;
}
}

iframe in parent page:

<iframe id=”frameName” name=”frameName” frameborder=”0″ width=”1064″ onload=”resizeFrame(‘frameName’);”></iframe>

script in header.php in the wordpress framework:

<script language=”JavaScript”>
function rock() {
if (document.defaultView){
var scnHei;
scnHei = document.defaultView.getComputedStyle(document.getElementById( ‘content’ ), null).getPropertyValue(‘height’, null);
scnHei = Math.round(remove(scnHei,”px”));
document.getElementById(“height”).innerHTML = scnHei;
}
}

function remove(s, t) {
/*
**  Remove all occurrences of a token in a string
**    s  string to be processed
**    t  token to be removed
**  returns new string
*/
i = s.indexOf(t);
r = “”;
if (i == -1) return s;
r += s.substring(0,i) + remove(s.substring(i + t.length), t);
return r;
}

</script>

body tag in header.php:

<body <?php body_class(); ?> id=”framePage” onload=”rock();”>