ขยาย iframe อัตโนมัติตามเนื้อหา - HTML - บอร์ด ชุมชนคนทำเว็บ
บอร์ด ชุมชนคนทำเว็บ

ขยาย iframe อัตโนมัติตามเนื้อหา

Administrator

  • www.nakhonitech.com
  • *****
  • 102
  • +0/-0
    • ดูรายละเอียด
    • โฮสติ้งนครไอเทค โฮสติ้งราคาถูก
ถ้าต้องการให้ 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>

โฮสติ้งถูก นครไอเทค ฟรีโฮสติ้ง โฮสติ้งราคาถูก hostingราคาถูก vps วิทยุออนไลน์ ตัวแทนจำหน่าย Reseller Hosting
https://www.nakhonitech.com/

Administrator

  • www.nakhonitech.com
  • *****
  • 102
  • +0/-0
    • ดูรายละเอียด
    • โฮสติ้งนครไอเทค โฮสติ้งราคาถูก
Re: ขยาย iframe อัตโนมัติตามเนื้อหา
« ตอบกลับ #1 เมื่อ: 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> 
โฮสติ้งถูก นครไอเทค ฟรีโฮสติ้ง โฮสติ้งราคาถูก hostingราคาถูก vps วิทยุออนไลน์ ตัวแทนจำหน่าย Reseller Hosting
https://www.nakhonitech.com/

Administrator

  • www.nakhonitech.com
  • *****
  • 102
  • +0/-0
    • ดูรายละเอียด
    • โฮสติ้งนครไอเทค โฮสติ้งราคาถูก
Re: ขยาย iframe อัตโนมัติตามเนื้อหา
« ตอบกลับ #2 เมื่อ: 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>
โฮสติ้งถูก นครไอเทค ฟรีโฮสติ้ง โฮสติ้งราคาถูก hostingราคาถูก vps วิทยุออนไลน์ ตัวแทนจำหน่าย Reseller Hosting
https://www.nakhonitech.com/

Kayla

  • *
  • 1
  • +0/-0
    • ดูรายละเอียด
Re: ขยาย iframe อัตโนมัติตามเนื้อหา
« ตอบกลับ #3 เมื่อ: 11 ม.ค. 2018 »
น่าสนใจมากเลย