Home  >  Article  >  Web Front-end  >  JavaScript native and jquery libraries implement iframe adaptive height and width_jquery

JavaScript native and jquery libraries implement iframe adaptive height and width_jquery

WBOY
WBOYOriginal
2016-05-16 16:41:371154browse

Javascript native and jquery library implement iframe adaptive content height and width---it is recommended to use jQuery code!

&#8205;<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 &#63; 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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn