Home >Web Front-end >JS Tutorial >JavaScript native and jquery libraries implement iframe adaptive height and width_jquery
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 36cc49f0c466276486e50c850b7e4956 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