Dynamic Resize For Embedded IFrames
Summary: brett_w_green shared a solution for dynamically resizing embedded iframes using the 'iframe-resizer' package. They detailed steps including styling the iframe, adding CSS for initialization, and incorporating JavaScript in the hosting applications to manage resizing. This approach allows the embedded dashboard to communicate with the parent application to resize when window dimensions change, and brett_w_green reported successful results.
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);
}
}
}
1 comment
brett_w_green
·2 years ago · EditedI'd like to add a solution which I though was nicer. I added the package iframe-resizer to our project (https://www.npmjs.com/package/iframe-resizer)
Styled the iframe as so:
Added a bit of css to initialize:
Added the javascript to the Dashboard script.
(Same as original answer... click Ellipsis on Sisense Dashboard and choose Edit Script and paste that minified code in there)
On the front end, in our scripts in the hosting apps, I just added this:
Essentially what it does is very similar to original answer. The embedded dashboard sends a message to parent application and it resizes if the window changes dimensions. Worked perfectly for me.