Dynamic Resize For Embedded IFrames

[intapiuser]

If you've ever attempted to dynamically resize your embedded iFrames in your parent application, you may have experienced a CORS conflict. Basically, since your parent application and sisense application serve from different domains, your browser restricts HTTP responses for security reasons.

Luckily, we have a workaround that leverages the Window.postMessage() function. This solution dynamically resizes your embedded iFrame based on the height of the contents.

// Within your SISENSE APPLICATION, apply this script on the dashboard to be embedded via iFrame:
dashboard.on('refreshend', function () {
 var heightValue = 0,
 columnArr = dashboard.layout.columns,
 columnHeight = [],
 targetWindow = window.parent,
 // replace with your target domain
 targetOrigin = 'http://main.mytestapp.com:8083';

 // iterate through columns
 for (var i = 0; i < columnArr.length; i++) {
 var cellsLength = columnArr[i].cells.length,
 heightTotal = 0;

 // increment through each column widget
 for (var j = 0; j < cellsLength; j++) {
 var height = columnArr[i].cells[j].subcells[0].elements[0].height;
 heightTotal += height;
 }
 columnHeight.push(heightTotal);

 // assign max aggregate column height
 heightValue = columnHeight.reduce(function (a, b) {
 return Math.max(a, b);
 });
 }
 targetWindow.postMessage({
 heightValue: heightValue
 }, targetOrigin);
});

// Within your PARENT APPLICATION:
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {
 // replace with your sisense application origin
 var sendingOrigin = 'http://reporting.mytestapp.com:8080';
 if (event.origin !== sendingOrigin) {
 throw new Error('bad origin:', event.origin);
 } else {
 try {
 // replace with your iFrame ID
 document.getElementById('ifm').height = event.data.heightValue;
 } catch (err) {
 throw new Error(err.name + ':', err.message);
 }
 }
}