IFrame

The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

To integrate our widgets in an iframe, just specify the URL of the widget in the src attribute of the iframe element. After that you'll probably have to set some styles according to your design profile.

How it works

The widget transfers information on a message channel to describe its own height whenever something inside it happens. To set it up you enter the id for the element where you want to the widget to injected as well as the src (the Widget URL). Please see the code example on how to implement the listener and set the height*:

Datablock's example

Set HEIGHT to match the height of the widget.

<iframe 
src="WIDGET_URL" 
width="100%" 
height="HEIGHT" 
style="border:none;">
</iframe>

MFN Example

<div id="inside-this-element"></div>
<script>
(function() {
    'use strict';

    // Adds an event listener in order to resize the iframe to an optimal
    // size for the page
    window.addEventListener('message', function(e) {
        var iFrameID = document.getElementById('mfn-iframe');
        var eventName = e.data[0];
        var data = e.data[1];
        switch(eventName) {
            case 'setHeight':
                iFrameID.height = data + 'px';
                break;
        }
    }, false);

    var ifrm = document.createElement('iframe');
    var c = document.getElementById('inside-this-element');
    c.innerHTML = '';
    ifrm.setAttribute('src', "WIDGET_URL");
    ifrm.setAttribute('width', '100%');
    ifrm.setAttribute('frameBorder', '0');
    ifrm.setAttribute('id', 'mfn-iframe');
    ifrm.setAttribute('scrolling', 'no');
    c.appendChild(ifrm)
})();
</script>

Example

Last updated

Was this helpful?