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

[brett_w_green]

I'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:

<iframe id="analytics-iframe" frameborder="0" class="dynamic-sizing" width="100%" url="your-dashboard-url"></frame>

Added a bit of css to initialize:

iframe.dynamic-sizing {
  width: 1px;
  min-width: 100%;
  min-height: 500px;
}

Added the javascript to the Dashboard script from https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js

(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:

  $("iframe.dynamic-sizing").each((el) => {
    iFrameResizer({
      log: true,
      autoSize: false,
      heightCalculationMethod: 'lowestElement'
    }, el.id)
  })

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.