Read table dimensions of iframe

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

This functionality is only implemented for tables as of today. If you would like to see something like this for other types, send us a message, and we will do our best to help!

Did you find what you were looking for? Thank you! There was a problem submitting your feedback. Please try again later.