การทำให้ iframe เป็นแบบ responsive

•

jirach

เคยไหมครับ อุตส่าทำให้เว็ปเป็น responsive ตั้งนาน แต่พอมีความจำเป็นต้อง embed เนื้อหาจากเว็ปอื่นโดยใช้ <iframe> ไอ้ตัว <iframe> เนี่ยแหละที่ทำให้ความเป็น responsive ของเราเสียไป เรามาดูกันว่าจะแก้ไขได้ยังไงบ้าง

iframe

แนวคิดในการทำ <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 มาใช้ละครับ :D

 

Leave a Reply

Your email address will not be published. Required fields are marked *