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.

Since iframe is treated as a separate website, CSS cannot style the content inside.

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

This code only works for MFN press feed with the WIDGET_URL provided by Modular Finance

<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