JS+jquery library implements iframe height and width adaptation (code attached)

This time I bring you the JS jquery library to implement iframe height and width adaptation (with code), what are the precautions for the JS jquery library to implement iframe height and width adaptation, The following is a practical case, let’s take a look.

‍<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>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

jquery background image switching (with code)

detailed explanation of the steps to implement table sorting using sortElements

jQuery is the simplest implementation of tab option switching

The above is the detailed content of JS+jquery library implements iframe height and width adaptation (code attached). For more information, please follow other related articles on the PHP Chinese website!