Consider, your webapplication has a RTF editor where user can enter the rich text. Now in order to show the content properly entered by the user, you should go for IFRAME event on the view page as well. But here the only problem that you don't want to see is, scroll bar for IFRAME.
In order to remove the scroll bar, we should increase the IFRAME height. But it is not really possible dynamically change the height without Javascript.
How to achieve IFRAME without scroll bar
I've found a very simple solution which has been tested on all the major browsers i.e.; it is cross browser supported approach.
Include the below script on your page, where you've an IFRAME control
<script type="text/javascript">
function resizeFrame(frame) {
frame.style.height = frame.contentWindow.document.body.scrollHeight + 20 + "px";
}
</script>
You can invoke the above function two ways.
1. Invoke this on load of the body
<body onload="resizeFrame(document.getElementById('iframe_id'))">2. For the dynamic web applications, we used have only one header file across the web application. In this situation instead of checking the conditions and making the onload call, you can use the time out functionality.
setTimeout("resizeFrame(document.getElementById('iframe_id'))",300);If you're still able to see scroll bar after implementing this, just increase the above value 20 to the necessary value.
Have a great time... Enjoy the web development...