iframe are fixed of length but you can still make it dynamic in height and width, the logic behind this is to pass message from your html frame to the new class helper html window.
And by using the src ="" with given through the url.
And the code will go like in this example below:-
Here the height is full in default.
<script>
function dynamiciframe(height)
{
document.getElementById('NameIframe').height = parseInt(height)+70;
}
</script>
<iframe id='frame_name_here' src='http://www.abc.com/framed.html'></iframe>
/* In www.bar.net/framed.html: */
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// The part where the height is given
var height = document.body.scrollHeight;
// Sending the data through the pipe.
var pipe = document.getElementById('helpframe');
// Need to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
/* Contents of www.foo.com/helper.html */
<html>
<!--
This page is on root on parent
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.dynamiciframe(height);
}
// Next you just have to create a function
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>
0 Comment(s)