Home > Web Front-end > JS Tutorial > 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
Release: 2016-05-16 16:41:37
Original
1236 people have browsed it

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>
Copy after login

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>
Copy after login

‍ 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>
Copy after login

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>
Copy after login

jquery library implements iframe adaptive content height and width

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template