iframe ขยายขนาดตามความสูงของเนื้อหา
23 ก.พ. 2016 , 7,124 Views , หมวดหมู่ jQuery,JavaScript,Ajax ทุกหมวดหมู่ โค๊ดดิ้ง ,
ในหน้าหลักที่ใช้ iframe ดึงข้อมูลหน้า pagecontent.html มาแสดง
index.html
|
1 |
<iframe name="iframeid" id="iframeid" src="pagecontent.html" height="100px" width="100%" frameborder="0" scrolling="no" style="padding:10px 0 0 0;"></iframe> |
นำโค๊ดด้านล่างไปใส่ใว้ใน หน้าที่เป็นเนื้อหาที่จะถูกดึงมาใน iframe
pagecontent.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> function sizeFrame() { $("#iframeid", top.document).css({ height: 0 }); // กำหนดความสูงของ iframe ให้เท่ากับ 0 var heightDiv=$(document).height(); // หาความสูงของเพจ pagecontent.html $("#iframeid", top.document).height(heightDiv); // กำหนดความสูงของ iframe ให้เท่ากับความสูงของ pagecontent.html } $(function(){ sizeFrame(); // เรียกใช้ฟังก์ขันเมื่อไฟล์ pagecontent.html โหลดเสร็จแล้ว $("#iframeid").load(sizeFrame); // เรียกใช้ฟังก์ขันเมื่อ iframe โหลด ไฟล์ pagecontent.html }); </script> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> Content here<br /> |
