PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

09 October 2009 By Ninenik Narkdee
jquery iframe ความสูง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery iframe ความสูง



ตัวอย่าง ลิ้งค์ที่ 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>







Tags:: iframe jquery ความสูง






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง