ตัวอย่าง ลิ้งค์ที่ 1 ลิ้งค์ที่ 2 ลิ้งค์ที่ 3
เมื่อคลิกที่ลิ้งค์ ทั้งสาม ขนาดความสูงของ iframe จะขยายตามขนาดของ เพจที่เปิด
กำหนด iframe ในไฟล์หลัก ส่วนที่สำคัญคือการกำหนด id ของ iframe สำหรับใช้ในการเรียกใช้
1 2 3 | <iframe name="myIframe" id="myIframe" src="pagecontent.html" width="600" height="100" frameborder="0" scrolling="no"></iframe> |
แทรกโค้ต jQuery ในไฟล์เนื้อหาที่โหลดจาก iframe ในที่นี้คือ pagecontent.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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 ให้เท่ากับ 0var heightDiv=$(document).height(); // หาความสูงของเพจ pagecontent.html$("#myIframe", top.document).height(heightDiv); // กำหนดความสูงของ iframe ให้เท่ากับความสูงของ pagecontent.html}$(function(){ sizeFrame(); // เรียกใช้ฟังก์ขันเมื่อไฟล์ pagecontent.html โหลดเสร็จแล้ว $("#myIframe").load(sizeFrame); // เรียกใช้ฟังก์ขันเมื่อ iframe โหลด ไฟล์ pagecontent.html});</script> |
