กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • iframe เทคนิคอื่นๆ

    June 1, 2017
    <style>
.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
    <div class="fluidMedia">
    <iframe src="http://vir9.com/qa/" frameborder="0"> </iframe>
</div>

    การทำ <iframe> ให้เป็น responsive แบบง่ายๆคือ เราจะใช้ javascript และ jQuery มาช่วยในการ resize HTML element หลังจากที่เนื้อหาในเว็ปโหลดเสร็จ ทำให้เราสามารถคำนวนความกว้าง และความสูง ของเนื้อหาที่จะเอามาใส่ใน <iframe> และปรับขนาด HTML container ให้ตามขนาดของเนื้อหาได้

    หลักเลยเราต้องแก้ทั้งหมดสามอย่างคือ

    1. jQuery ในส่วนของเว็ปปลายทางที่จะดึงเนื้อหามา

    [syntax type=”js”]

$(window).load(function()
{
    //variables
    var resizeTimer;
    //send height to parent
    sendHeight();
    //on resize re-send the height
    //use a timer so not to send loads of message
    $(window).on(“resize”, function()
    {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(sendHeight, 100);
    });
    //send height to parent
    function sendHeight()
    {
        //get the height
        var height = $(‘body’).height();
        //send it to the parent
        parent.postMessage(height, “http://plernarie.com”);
    }
});
[/syntax]

    จาก code ด้านบน เรากำหนดให้เมื่อ page load เสร็จ ให้ส่งขนาดของเว็ปไปให้เว็ปต้นทาง (ในที่นี้คือ parent) เพื่อที่จะบอกเว็ปต้นทางว่าขนาดความสูงของเราเป็นเท่าไหร่

    2. ที่เว็ปต้นทาง
    สำหรับเว็ปต้นทางต้องทำสองอย่างคือ CSS และ jQuery script ที่เอาไว้ปรับขนาดของ HTML container ครับ

    CSS

    [syntax type=”css”]
.embedContainer {

height: 0;

    width: 100%;
    padding-bottom: 56.25%
    overflow: hidden;
    position: relative;
}
.embedContainer iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
[/syntax]

    ในส่วนของ CSS ก็ไม่มีอะไรมากครับ สังเกตุว่าเรากำหนด ความสูงของ class embedContainer ไว้เป็น 0 เพราะเดี๊ยวจะมาปรับขนาดของ class นี้ด้วย jQuery  อีกที

    jQuery

    [syntax type=”js”]

//listen for the height of the iframe
  if (window.addEventListener) {
      window.addEventListener (“message”, receiveMessage, false);
  } else {
      if (window.attachEvent) {
          window.attachEvent(“onmessage”, receiveMessage, false);
      }
  }
  function receiveMessage(event)
  {
      //stop if the event has an origin we don’t expect
      if (event.origin !== “http://plernarie.jirach.com”) {
          return;
      }
      //get the height of the iframe
      var height = event.data;
      //set the height on the iframe
      //to be more correct, set the padding on its parent (to keep it responsive)
      $(“.embedContainer”).css(“padding-bottom”, height + “px”);
  }
[/syntax]

    ข้างบนจะเห็นว่าเราสร้าง event listener ไว้อันนึง เอาไว้คอยปรับค่าความสูงของเว็ปปลายทาง และเมื่อเว็ปปลายทาง trigger event มาแล้ว เราก็ใช้ jquery ไปปรับขนาดความสูงของ HTML container ที่เราสร้างไว้ใน CSS  เท่านั้นเองครับ

    ที่นี่เราก็จะได้ <iframe> แบบ responsive มาใช้

    OK

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>

    http://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories