Adjust width height of iframe to fit with content

Sometimes, we would like to include some content without affect by css in current window. The simplest and easiest way is use iframe without scroll bar. However, there is a common problem, content inside the iframe cannot be fully displayed. It is because the inner content can longer and wider then the height or width we set in frame.

<iframe id="MyIframe" scrolling="no" frameborder="0" width="300px" 
 height="600px"></iframe>

In the example above, we set the iframe height and width to 600px and 300px respectively. When the content in iframe is over the limit, the problem will occur. This problem can be fixed by using JavaScript and here is the solution:

<script type="text/javascript">
 function ResizeIframe(id){
  var frame = document.getElementById(id);
  frame.height = frame.contentWindow.document.body.scrollHeight + "px";
  frame.width = frame.contentWindow.document.body.scrollWidth + "px";
 }
</script>
<iframe id="MyIframe" onload="ResizeIframe('MyIframe')" scrolling="no" 
 frameborder="0" height="600"></iframe>