Javascript native and jquery library implement iframe adaptive content height and width---it is recommended to use jQuery code!
‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
Code based on Jquery library is easy to implement:
<script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#mainframe").load(function(){ $(this).height(0); //用于每次刷新时控制IFRAME高度初始化 var height = $(this).contents().height() + 10; $(this).height( height < 500 ? 500 : height ); }); }); </script>
Implementation based on JS native code:
<script language="javascript"> if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} </script>
Just add the above paragraph after the file
that is called by your iframe!
This can also control the height of the iframe to automatically grow with the amount of content
<iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>
jquery library implements iframe adaptive content height and width