Responsive iframe

Summary Insert the following code above your chart, map or table:

<script type="text/javascript">(function () {"use strict";window.addEventListener("message",function(i){if(i.data.type==="everviz-dimensions"){var r=4;var e=document.getElementsByTagName("iframe");for(var a=0;a<e.length;a++){var v=e.item(a);var n=v.attributes.src.value.split("/")[r];if(n===i.data.uuid){v.style.height=i.data.height+"px"}}}});})()</script>

Demo

• Live demo without the code
• Live demo with the code.

Both of these are the same chart.

Explanation
When loading a chart, map, or table, from our inject codes, we perform some logic to resize it so that it best fits the viewers screen. However, with IFrames we are unable to do this as a result of the browser's safety features, which prevents IFrames from interacting with its parent page.

To get around this, we dispatch messages which include the desired dimensions of a table. You can pick these up, and we provide some example code to demonstrate the resizing.

Below is an annotated version of the code you will find in this example.

window.addEventListener('message', (event) => {
    //Look for the event we dispatch.
    if (event.data.type === 'everviz-dimensions') {
        var UUID_POSITION = 4
        var iframes = document.getElementsByTagName('iframe')
        // Filter
        for (let i = 0; i < iframes.length; i++) {
            var iframe = iframes.item(i) var uuid = iframe.attributes.src.value.split('/')[UUID_POSITION]
            // Only modify the iframe that dispatched the event
            if (uuid === event.data.uuid) {
                iframe.style.height = event.data.height + 'px'
            }
        }
    }
})

It should be noted that we are only using part of the information dispatched, namely the height component of the dimensions. The complete object dispatched will look like the below:

{
    type: 'everviz-dimensions',
    uuid: <string>,
    width: <number>,
    height: <number>
}