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
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

Last updated
Was this helpful?