ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery

ตัวอย่าง ลิ้งค์ที่ 1 ลิ้งค์ที่ 2 ลิ้งค์ที่ 3

เมื่อคลิกที่ลิ้งค์ ทั้งสาม ขนาดความสูงของ iframe จะขยายตามขนาดของ เพจที่เปิด

กำหนด iframe ในไฟล์หลัก ส่วนที่สำคัญคือการกำหนด id ของ iframe สำหรับใช้ในการเรียกใช้

<iframe name="myIframe"
 id="myIframe" src="pagecontent.html" width="600" height="100" frameborder="0"
 scrolling="no"></iframe>

แทรกโค้ต jQuery ในไฟล์เนื้อหาที่โหลดจาก iframe ในที่นี้คือ pagecontent.html

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
<script type="text/javascript"> 
 function sizeFrame() {
$("#myIframe", top.document).css({ height: 0 });
// กำหนดความสูงของ iframe ให้เท่ากับ 0
var heightDiv=$(document).height(); 
// หาความสูงของเพจ pagecontent.html
$("#myIframe", top.document).height(heightDiv); 
// กำหนดความสูงของ iframe ให้เท่ากับความสูงของ pagecontent.html
}
$(function(){
          sizeFrame(); 
          // เรียกใช้ฟังก์ขันเมื่อไฟล์ pagecontent.html โหลดเสร็จแล้ว
          $("#myIframe").load(sizeFrame); 
         // เรียกใช้ฟังก์ขันเมื่อ iframe โหลด ไฟล์  pagecontent.html
});
</script>