Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Iframe 

<div class="iframe">
    <iframe src="https://www.rehau.com" frameborder="0" scrolling="no" height="400" allowfullscreen></iframe>
</div>
 
<div class="iframe">
  <iframe src="{{{src}}}" frameborder="0" scrolling="no" height="{{height}}" allowfullscreen></iframe>
</div>
 
{
  "src": "https://www.rehau.com",
  "height": "400"
}
  • Content: 
    .iframe {
  display: block;
  overflow: hidden;

  > iframe {
    width: 100%;
    border: 0;
  }
}
  • URL: /components/raw/molecules-iframe/iframe.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/16-iframe/iframe.scss
  • Size: 100 Bytes
  • Handle: @molecules-iframe
  • Preview:
  • Filesystem Path: src/components/02-ui-components/02-molecules/16-iframe/iframe.hbs

Full iframe height will be set only if iframe source page sends its height data with parent.postMessage() method.

Example script which can be included in source page for responsive iframe height adjustments provided below:

(function () {
  function sendHeight() {
    if (!parent.postMessage) return;
    var height = getHeight();
    parent.postMessage(height, '*');
  }
  function getHeight() {
    var el = document.createElement('div');
    el.style.height="0px !important";
    el.style.clear="both";
    document.body.appendChild(el);
    var offset = el.offsetTop;
    el.parentNode.removeChild(el);
    return offset;
  }

  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var resizeEvent = eventMethod === "attachEvent" ? "onresize" : "resize";
  var timeout = false;
  eventer(resizeEvent, function() {
    timeout && clearTimeout(timeout);
    timeout = setTimeout(sendHeight, 150); //150ms debounce time
  });
  sendHeight();
})();