Using iFrame is very wrong approach to achieve any functionality. But due to some unavoidable reasons we have to use iframe in our application.
After using iframe in application our main problem becomes that how to give its height so that user not able to know that there is any iframe. As we all know that in dynamic site we can’t fix our content height, therefore porviding accurate height is not posible.
Eighter you end up on giving more height which will show whitespace on bottom or less height will be show scroller on your page. In both case your web page will look ugly.
After gooling a lot, I found best script which can set its height after calculating its content height. Not only you can set its height according to its height also you can change attribute of iframe parent ID also. I hope this will help to work with iframe and make your task easy.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function resizeIframe(iframeID) {
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content'); // content is whole container ID in child iframe
iframe.style.height = container.offsetHeight + 'px';
}
</script>
</head>
<body>
<div id="content">
What I have done in the past is use a trigger from the iframe\'d page in window.onload (NOT domready, as it can take a while for images to load) to pass the page\'s body height to the parent.What I have done in the past is use a trigger from the iframe\'d page in window.onload (NOT domready, as it can take a while for images to load) to pass the page\'s body height to the parent.What I have done in the past is use a trigger from the iframe\'d page in window.onload (NOT domready, as it can take a while for images to load) to pass the page\'s body height to the parent.What I have done in the past is use a trigger from the iframe\'d page in window.onload (NOT domready, as it can take a while for images to load) to pass the page\'s body height to the parent.What I have done in the past is use a trigger from the iframe\'d page in window.onload (NOT domready, as it can take a while for images to load) to pass the page\'s body height to the parent.
</div>
</div>
<script type="text/javascript">
resizeIframe('slideshow_frame'); // slideshow_frame is parent HTML's Iframe ID
</script>
</body>
</html>
Here slideshow_frame is ID of parent HTML iframe attribute.
Just copy and paste this code block in your iframe.
I have use this script code in our project if you are not able to use this please share your problem with me. May be i can help you.