บอร์ด ชุมชนคนทำเว็บ

คลังความรู้ Zone -:- => HTML => ข้อความที่เริ่มโดย: Administrator ที่ 07 มี.ค. 2016

หัวข้อ: ขยาย iframe อัตโนมัติตามเนื้อหา
เริ่มหัวข้อโดย: Administrator ที่ 07 มี.ค. 2016
ถ้าต้องการให้ iframe ขยายอัตโนมัติตามเนื้อหาที่อยู่ข้างในเราสามารถใช้โค้ทด้านล่างปรับความสูงได้ครับ

โค๊ด: [Select]
<script language="javascript">
function iframeHeight(obj){
    the_height= obj.contentWindow.document.body.offsetHeight;
    obj.height=the_height+10;
}
<iframe id="some" onload="iframeHeight(this)"></iframe>

หัวข้อ: Re: ขยาย iframe อัตโนมัติตามเนื้อหา
เริ่มหัวข้อโดย: Administrator ที่ 07 มี.ค. 2016
ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery

กำหนด iframe ในไฟล์หลัก ส่วนที่สำคัญคือการกำหนด id ของ iframe สำหรับใช้ในการเรียกใช้
โค๊ด: [Select]
<iframe name="myIframe" 
 id="myIframe" src="pagecontent.html" width="600" height="100" frameborder="0" 
 scrolling="no"></iframe> 

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

โค๊ด: [Select]
<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> 
หัวข้อ: Re: ขยาย iframe อัตโนมัติตามเนื้อหา
เริ่มหัวข้อโดย: Administrator ที่ 07 มี.ค. 2016
อีกแบบ

โค๊ด: [Select]
<script language="JavaScript">
function autoResize(id){
var newheight;
var newwidth;

if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}

document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
</script>
<iframe src="showtopics2.php" width="100%" height="100%" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onLoad="autoResize('CHANGETHIS');"></iframe>
หัวข้อ: Re: ขยาย iframe อัตโนมัติตามเนื้อหา
เริ่มหัวข้อโดย: Kayla ที่ 11 ม.ค. 2018
น่าสนใจมากเลย