Dynamic Resize For Embedded IFrames
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);
}
}
}Updated 02-09-2024
