How to implement iframe adaptive height and width in jquery

This time I will bring you jqueryHow to implement iframe adaptive height and width, jquery implements iframe adaptive height and widthWhat are the precautions, the following is a practical case, one Get up and take a look.

javascriptNative and jquery libraries implement iframe adaptive content height and width---jQuery code is recommended!

‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

The code based on the 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>

‍The implementation based on the 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 file you are called by iframe Then add the above paragraph!
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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for Jquery to operate js arrays and objects

Detailed explanation of the steps for jquery to remove selected values ​​from an array

The above is the detailed content of How to implement iframe adaptive height and width in jquery. For more information, please follow other related articles on the PHP Chinese website!