Check out the Latest Articles:
JQuery 1.3 and iFrames

I know iFrames are evil, but sometimes they have their uses, like when you have to (against your will) soft launch a website at an hour’s notice.

So you create you’re auto resizing iframe code like so:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
<title>[Some Urgent Site]</title>
<style type=”text/css”>
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; overflow-y:scrolling; overflow-x:hidden;}
</style>
<script language=”JavaScript”>
<!–
function resize_iframe()
{

var height=window.innerWidth;//Firefox
if (document.body.clientHeight)
{
height=document.body.clientHeight;//IE
}
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById(”[some frame id]“).style.height=parseInt(height-
document.getElementById(”[some frame id]“).offsetTop-8)+”px”;
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;

//Instead of using this you can use:
// <BODY onresize=”resize_iframe()”>

//–>
</script>
</head>
<body>
<div>
<iframe id=”[some frame id]” width=”100%” onload=”resize_iframe()” src=”http://some.url” scrolling=”yes”>
<p><a href=”http://some.url”>some.url</a></p>
</iframe>
</div>
</body>
</html>

Great. But if you’re running JQuery 1.3 on the target site, you’ll get an “access denied” or “n.props is null” error in IE.

Whats the fix? Use 1.2.6 instead with the following include code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Hey Presto! JQuery works again!



  1. admin (Reply) on Thursday 14, 2009

    I hope this helps someone because it sure took me a good 2 hours to workout!